0
210
ViewsHighchart - Rango de columna como flechas
Estoy integrando un gráfico de rango de columnas, pero quiero que la columna aparezca como una flecha. La flecha podría apuntar hacia abajo o hacia arriba en función de si el valor aumenta o disminuye.
Parece que no puedo encontrar ninguna solución para lograr esto.
A continuación se muestra una imagen de referencia de lo que estoy tratando de lograr ...
Highcharts.chart('container', { chart: { type: 'columnrange', }, xAxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] }, series: [{ name: 'Temperatures', data: [ [-9.9, 10.3], [-8.6, 8.5], [-10.2, 11.8], [-1.7, 12.2], [-0.6, 23.1], [3.7, 25.4], [6.0, 26.2], [6.7, 21.4], [3.5, 19.5], [-1.3, 16.0], [-8.7, 9.4], [-9.0, 8.6] ] }] }); <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/highcharts-more.js"></script> <figure class="highcharts-figure"> <div id="container"></div> </figure>
·
Juan Pablo Isaza
1 answers
Answer question0
Puede renderizar triángulos usando Highcharts.SVGRenderer .
Referencia de la API: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
Pero creo que la opción más fácil será usar una serie de dispersión con marcadores triangulares para lograr esto. Verifique la siguiente configuración y demostración:
{ type: 'scatter', showInLegend: false, enableMouseTracking: false, marker: { symbol: 'triangle-down', fillColor: 'rgb(124, 181, 236)', radius: 9 }, states: { inactive: { opacity: 1, }, }, data: [{ x: 9, y: -1.3 }, { x: 10, y: -8.7 }, { x: 11, y: -9.0 } ] }Demostración: https://jsfiddle.net/BlackLabel/3rokf4aw/
·
Juan Pablo Isaza
Report
Answer question