Javascript 如何设置绘制连接堆栈条的线

我想画一张这样的图表

但我不知道如何设置config以显示条之间的线连接，如上图所示。 这是我的演示代码：

    Highcharts.chart('container', {
      chart: {
        type: 'bar'
      },
      title: {
        text: ''
      },
      xAxis: {
        categories: ['今週', '前週']
      },
      legend: {
        enabled: false
      },
      yAxis: {
        min: 0,
        title: {
          text: null
        },
        lineWidth: 1,
        gridLineDashStyle: 'Dot',
        plotLines: [{
          width: 1,
          value: 100,
        }]
      },
      plotOptions: {
        bar: {
          stacking: 'percent',
          dataLabels: {
            enabled: true,
            format: '{y} %'
          }
        }
      },
      series: [{
        name: 'Ad Group 1',
        data: [20, 18]
      }, {
        name: 'Ad Group 2',
        data: [19, 18]
      }, {
        name: 'Ad Group 3',
        data: [16, 38]
      }, {
        name: 'Ad Group 4',
        data: [35, 22]
      }],
      exporting: {
        enabled: false
      }
    });

---

我的小提琴：

您可以通过添加额外的线系列，以及从points对象获得的适当数据来实现图片中的类似效果，下面是演示，它应该可以澄清我的想法

events: {
  load(){
    let chart = this;

    chart.series.forEach((s,i) => {
        if(i !== 0){
        chart.addSeries({
            type: 'line',
            data: [{x: 0.24, y: s.points[0].stackY}, {x: 0.76, y: s.points[1].stackY}],
          color: 'red',
          marker: {
            enabled: false
          },
          enableMouseTracking: false,
        })
      }
    })
  }
}

演示：

API:

API:

---

如果有什么不清楚的地方或者你有任何其他问题，请随时提问

声誉低于15的人所投的票将被记录，但不会改变公开显示的帖子分数。