Highcharts 连续的堆积面积图

说明：设置两个柱形图间距为0

Highcharts柱图，设置X轴各Column的间距
plotOption : {
column : {
// 设置每个柱自身的宽度
pointWidth :
// x轴每个点只用一个柱，则这个属性设置的是相邻的两个点的柱之间的间距。
// 如果x轴每个点有2个柱，则这个属性设置的是左侧点的右柱与右侧点的左柱之间的间距。
// 0.5的含义是，如果x轴长100px,则间距是100*0.5=50px
pointPadding : 0.5
// 如果x轴一个点有两个柱，则这个属性设置的是这两个柱的间距。
groupPadding : 0.5
}
}

如下设置：

　　pointPadding : 0,
groupPadding : 0,
borderWidth: 0,

效果图：

代码：

$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
}
}
},
legend: {
align: 'right',
x: -70,
verticalAlign: 'top',
y: 20,
floating: true,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
borderColor: '#CCC',
borderWidth: 1,
shadow: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'Total: '+ this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal',
pointPadding : 0,
groupPadding : 0,
borderWidth: 0,
dataLabels: {
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
}
}
},
series: [{
name: 'John',
data: [5, 5, 5, null, null]
}, {
name: 'Jane',
data: [null, 2, 2, 2, null]
}, {
name: 'Joe',
data: [null, null, 4, 4, 4]
}]
});
});