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

Question

我想画一个这样的图表 堆栈条形图

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

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

您可以通过添加额外的线条系列来实现如图所示，其中包含可以从点对象获得的正确数据，下面是演示，它应该澄清我的想法。

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

原料药：https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

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