向折线图添加额外标签

Question

我有一个 X 轴上有 100 个点的折线图，每 25 个点需要单独标记。就像在概念上图表中有 4 个矩形，每个矩形覆盖 25 个点。在这个例子中，我如何在每个矩形上放置一个标签。我在 API 中没有找到任何似乎支持这一点的内容。

Answer 1

根据您想要达到的效果，您可以使用annotations module或Renderer API在图表上绘制标签。我想你也可以在这种情况下使用 xAxis.blotBands 。查看以下文档以获取更多信息：

文档： https://www.highcharts.com/docs/advanced-chart-features/annotations-module https://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

向折线图添加额外标签

Add extra labels to line charts

highcharts