我试图创建双轴高图。在一个轴上我想要百分比堆积条形图,而在另一个轴上我想要一个折线图。虽然我已经关闭了(我的正常'正常&叠加的条形图由折线图覆盖),但我似乎无法将条形图以百分比形式堆叠,即使在指定之后堆叠为'百分比'。
以下是我所拥有的:
$(function () {
$('#container').highcharts({
chart: {
type: 'column',
width: 550,
height: 400
},
title: {
text: 'Title'
},
xAxis: {
categories: [1, 2, 3]
},
yAxis: [{
min: 0,
title: {
text: 'Percentage'
}
}, {
min: 0,
opposite: true,
title: {
text: 'Total Count',
style: {
color: Highcharts.getOptions().colors[4]
}
},
labels: {
style: {
color: Highcharts.getOptions().colors[4]
}
},
}],
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
shared: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0,
stacking: 'percentage'
}
},
series: [{
name: 'A',
type: 'column',
yAxis: 0,
data: [5, 1, 2]
}, {
name: 'B',
type: 'column',
yAxis: 0,
data: [1, 1, 2]
}, {
name: 'C',
type: 'column',
yAxis: 0,
data: [2, 3, 1]
}, {
name: 'D',
type: 'column',
yAxis: 0,
data: [4, 3, 3]
}, {
name: 'Total Count',
type: 'line',
yAxis: 1, // Secondary axis (a total of all in the primary axis)
data: [12, 8, 8]
}]
});
});
JSFiddle:jsfiddle.net/natecarrier/5mX7s/