小提琴:http://jsfiddle.net/nz343opa/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stacked Area Chart</title>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
<script>
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function () {
return this.value / 1000;
}
}
},
tooltip: {
split: true,
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, null, null, null]
}, {
name: 'Asia2',
data: [null, null, null, 947, 800, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, null, null, null]
}, {
name: 'Europe2',
data: [null, null, null, 408, 339, 818, 1201]
}]
});
</script>
</html>
目前,堆积面积图的表现符合预期,但1990年的点却远远偏离了偏僻。
这通常适用于非堆叠面积图,例如以下小提琴:http://jsfiddle.net/D4sbc/95/
有谁知道使用高图表堆叠区域是否可以实现这种行为?
发生这种情况是因为在位置 3 上您定义了 4 个点,这些点在堆叠图表中移动。如果要拆分堆叠,则需要定义 series.stack 属性。
series: [{
name: 'Asia',
data: [502, 635, 809, 947, null, null, null],
stack: 0
}, {
name: 'Asia2',
data: [null, null, null, 947, 800, 767, 1766],
stack: 1
}, {
name: 'Europe',
data: [163, 203, 276, 408, null, null, null],
stack: 0
}, {
name: 'Europe2',
data: [null, null, null, 408, 339, 818, 1201],
stack: 1
}]
示例:http://jsfiddle.net/nz343opa/1/