我有一个折线图,在X轴上有100个点,每个25个点需要单独的标签。它就像有4个矩形在图表中概念上每个覆盖25个点。我怎么能把一个标签在这个例子中的每个矩形。我还没有发现任何API似乎支持这一点。
sqougxex1#
根据您的需要,您可以使用annotations module或Renderer API在图表上绘制标签。我想在这种情况下您也可以使用xAxis.blotBands。请查看以下文档以获得更多信息:
annotations module
Renderer API
xAxis.blotBands
文件:https://www.highcharts.com/docs/advanced-chart-features/annotations-modulehttps://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
下面是一个带有文本的渲染矩形的示例代码:
chart: { events: { render: function() { let chart = this, x1 = chart.xAxis[0].toPixels(0), x2 = chart.xAxis[0].toPixels(25), width = x2 - x1, height = chart.plotSizeY, y = chart.yAxis[0].toPixels(0) - height, text = 'My text'; // RECTANGLE chart.renderer .rect(x1, y, width, height) .attr({ stroke: 'red', 'stroke-width': 2, zIndex: 3, }) .add(); // TEXT chart.renderer .text(text, x1 + width / 2, y) .attr({ align: 'center', zIndex: 4, }) .css({ fontSize: '15px' }) .add(); } } },
演示:https://jsfiddle.net/BlackLabel/3nqjwha5/API参考:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer
1条答案
按热度按时间sqougxex1#
根据您的需要,您可以使用
annotations module
或Renderer API
在图表上绘制标签。我想在这种情况下您也可以使用xAxis.blotBands
。请查看以下文档以获得更多信息:文件:https://www.highcharts.com/docs/advanced-chart-features/annotations-modulehttps://www.highcharts.com/docs/chart-concepts/plot-bands-and-plot-lines
下面是一个带有文本的渲染矩形的示例代码:
演示:https://jsfiddle.net/BlackLabel/3nqjwha5/
API参考:https://api.highcharts.com/class-reference/Highcharts.SVGRenderer