我需要帮助实现自定义标签与左,右值或文本的情节线,但找不到如何做到这一点的方式。Custom Labels我尝试单独使用系列:{ type:'column' }和series:{ type:'line' },但是不好
wi3ka0sx1#
你可以通过使用annotations模块和Highcharts.SVGRenderer来绘制一个圆来实现这一点:
配置示例:
Highcharts.chart('container', { chart: { type: 'column', events: { render: function() { var chart = this, plotLineOptions = chart.yAxis[0].plotLinesAndBands[0].options; if (!chart.customCircle) { chart.customCircle = chart.renderer .circle() .attr({ fill: plotLineOptions.color }) .add(chart.customCircles); } this.customCircle.attr({ x: chart.plotLeft + chart.plotWidth, y: chart.yAxis[0].toPixels(plotLineOptions.value), r: 5 }); } } }, xAxis: { categories: ['Category 1', 'Category 2', 'Category 3', 'Category 4', 'Category 5'] }, yAxis: { opposite: true, plotLines: [{ zIndex: 10, value: 3, color: 'red', dashStyle: 'dash', width: 2, label: { text: '3.18', align: 'right', x: 35, y: 5 } }], labels: { format: "{point.value}" } }, annotations: [{ zIndex: 15, labels: [{ shape: 'rect', point: { x: -0.5, y: 2, xAxis: 0, yAxis: 0 }, text: 'Label' }] }], series: [{ name: 'Data', data: [2, 4, 6, 8, 10] }] });
Demo:https://jsfiddle.net/BlackLabel/ut02hgp9/API参考:https://www.highcharts.com/docs/advanced-chart-features/annotations-module https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle
1条答案
按热度按时间wi3ka0sx1#
你可以通过使用annotations模块和Highcharts.SVGRenderer来绘制一个圆来实现这一点:
配置示例:
Demo:https://jsfiddle.net/BlackLabel/ut02hgp9/
API参考:https://www.highcharts.com/docs/advanced-chart-features/annotations-module https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#circle