0
358
ViewsCómo agregar texto en los bordes de cada sección en gráficos altos de embudo
Con la ayuda de mi pregunta anterior, puedo establecer alturas iguales para todas las secciones del embudo. ¿Cómo puedo agregar algunos textos adicionales a los bordes (derecha) de cada sección? No encontré ninguna documentación para esto. Mi gráfico de embudo esperado de la siguiente manera:
Highcharts.chart('container', { chart: { type: 'funnel' }, title: { text: 'Sales funnel' }, plotOptions: { series: { dataLabels: { enabled: true, format: '<b>{point.name}</b> ({point.y:,.0f})', softConnector: true, inside: true, }, neckHeight: "0%", neckWidth: "80%", width: '15%', reversed: true, } }, legend: { enabled: false }, series: [{ name: 'Unique users', data: [ ['Website visits', 15654], ['Downloads', 4064], ['Requested price list', 1987], ['Invoice sent', 976], ['Finalized', 846] ] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { plotOptions: { series: { dataLabels: { inside: true }, center: ['50%', '50%'], width: '100%' } } } }] } });jsfiddle Ejemplo: https://jsfiddle.net/kiranuk/xhfbyj64/
Gracias por la ayuda.
·
Juan Pablo Isaza
1 answers
Answer question0
Para agregar texto adicional en el gráfico, use Highcharts. Procesador SVG
Referencia de la API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Código de muestra:
chart: { type: 'funnel', events: { render: function() { let chart = this, point1 = chart.series[0].points[4], x = point1.dlBox.x + point1.dlBox.bottomWidth + chart.plotLeft + 1, y = point1.dlBox.y + chart.plotTop - point1.dlBox.height; if (!chart.myCustomText) { chart.myCustomText = chart.renderer .text('1% <br> Did') .css({ fontSize: '10px', zIndex: '3px' }) .add(); } //pdate text coordinates chart.myCustomText.attr({ x: x, y: y }) } } },Demostración: https://jsfiddle.net/BlackLabel/kLyt6ngs/
·
Juan Pablo Isaza
Report
Answer question