highcharts 向折线图添加额外标签

ippsafx7  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(210)

我有一个折线图,在X轴上有100个点,每个25个点需要单独的标签。它就像有4个矩形在图表中概念上每个覆盖25个点。我怎么能把一个标签在这个例子中的每个矩形。我还没有发现任何API似乎支持这一点。

sqougxex

sqougxex1#

根据您的需要,您可以使用annotations moduleRenderer 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

相关问题