如何设置绘制一条线连接堆栈栏

Question

我想绘制这样的图表stack bar chart

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

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

我的小提琴：https://jsfiddle.net/vinhlv2788/emta9p8k/10/

Answer 1

您可以通过添加额外的线系列和适当的数据来实现图中所示的效果，这些线可以从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,
        })
      }
    })
  }
}

演示：https://jsfiddle.net/BlackLabel/5Lej2arw/1/

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

API：https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

[如果不清楚，或者您还有其他问题，请随时提问！