在每个条形图上为HighCharts中堆积和分组的列添加一行线

Question

我想在每个堆栈栏上添加一条红线。请参阅下面的图片。

如果您在图片中注意到，每个堆栈栏顶部都有一条红线。我尝试了许多解决方法，但都无济于事。有人知道如何实现吗？

粘贴示例代码。

 this.graphData.graphRef = new Chart({
  chart: {
    type: 'column',
    height: this.graphHeight
  },
  xAxis: {
    categories: this.graphData.column,
    labels: {
      useHTML: true,
    }
  },
  yAxis: {
    min: 0,
    stackLabels: {
      enabled: true,
      rotation: 270,
      x: -16,
      y: 160,
      style: {
        fontWeight: 'bold',
        color: 'black'
      }
    }
  },
  plotOptions: {
    column: {
      stacking: 'normal',
      pointPadding: 0.3,
      dataLabels: {
        enabled: false,
        color: '#000',
        style: {
          textOutline: '0px',
          fontSize: '10px',
          fontWeight: 'none'
        }
      },
      pointWidth: 30
    },
   ...
  series: [
  {
     name: 'CBG',
     data: [15,20, 14, 20],
     stack: 'P',
     zIndex: i
   },
   ...
  {
     name: 'CBG',
     data: [15, 23, 14, 20],
     stack: 'R',
     zIndex: i
   },
   ...
  {
     name: 'CBG',
     data: [25, 23, 24, 20],
     stack: 'A/C',
     zIndex: i
   },
   ...
  {
     name: 'CBG',
     data: [25, 23, 14, 20],
     stack: 'E',
     zIndex: i
   },
   ...

 ]
});

任何帮助或建议，我们都会感激不尽。谢谢！

更新

例如假设红线称为CBG。如果Q1FY2020组的堆栈栏P的CBG为1500，则应在Y轴为1500的堆栈上绘制红线。希望您理解。

Answer 1

您可以使用SVGRenderer工具将这些行呈现为渲染回调内部的路径。我准备了一个计算点数的示例。

演示：https://jsfiddle.net/BlackLabel/r9L0yhg2/

events: {
  render() {
    let chart = this,
      distanceFromStack = 10;

    chart.series.forEach(s => {
      s.points.forEach((p, i) => {
        //path coordinates
        let pathx1 = p.barX + chart.plotLeft,
          pathy1 = p.plotY + distanceFromStack,
          pathx2 = pathx1 + p.pointWidth,
          pathy2 = pathy1;

                    //destroy existing path after resize
        if (p.customLine) {
          p.customLine.destroy();
        }

        //render path only for the upper points - their yBottom is different than chart.plotHeight
        if (p.yBottom !== chart.plotHeight) {
          p.customLine = chart.renderer.path(['M', pathx1, pathy1, 'L', pathx2, pathy2]).attr({
            stroke: 'red',
            'stroke-width': 2
          }).add();
        }
      })
    })
  }
}

API：https://api.highcharts.com/highcharts/chart.events.render

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#path

[如果不清楚，请随时提问。