在每个条形图上为HighCharts中的堆叠和分组柱添加一条线

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

如果您注意到图片中每个堆叠条的顶部都有一条红线。我尝试过许多变通方法，但都不管用。有人知道如何做到这一点吗

粘贴示例代码

 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的堆料上绘制红线。希望您理解。

您可以使用SvgRender工具将这些线渲染为渲染回调中的路径。我准备了一个带有计算点位置的示例

演示：

API:

API:

---

如果有什么不清楚的地方，请尽管问。

非常感谢兄弟！我能看到这条线，但没什么问题。如果堆栈值更大，则红线位于堆栈后面。如何提出？红线有一些值，基于它应该绘制的值，那么如何计算distanceFromStack值呢？我知道这是很多问题，但我真的需要答案，兄弟！据我所知，您希望实现这样的目标：为红线留出更多空间，请将

yAxis.max

设置为更大的值（本例中为60）。我假设红线上方的这个值是堆栈标签值，所以我使用

stackLabels.y

。No brother来定位它们。我已经更新了问题。请查收。对不起，我不明白你的要求。我知道您希望以不同的点高度渲染这条线-为此，请为特定点添加逻辑，以计算渲染路径的y值（路径1和路径2）。

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();
        }
      })
    })
  }
}