plotLines中的多个标签(Highcharts.js)

bis0qfac  于 2023-10-20  发布在  Highcharts
关注(0)|答案(1)|浏览(173)

我需要帮助实现自定义标签与左,右值或文本的情节线,但找不到如何做到这一点的方式。
Custom Labels
我尝试单独使用系列:{ type:'column' }和series:{ type:'line' },但是不好

wi3ka0sx

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

相关问题