我使用HighCharts生成了以下图表:
每个季度上方的红色数字从每个季度的系列数据中提取。我已经使用dataLabels和自定义数据来实现这一目标:
var options = {
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: null
},
xAxis: {
categories: [
'Q1',
'Q2',
'Q3',
'Q4'
],
title: {
text: 'Year Quarter',
margin: 20,
style: {
fontFamily: 'Roboto',
fontSize: '14px',
fontWeight: '600'
}
},
labels: {
style: {
fontFamily: 'Roboto',
fontSize: '12px'
}
}
},
yAxis: [{
min: 0,
allowDecimals: false,
title: {
text: 'No. Incidents',
margin: 20,
style: {
fontFamily: 'Roboto',
fontSize: '14px',
fontWeight: '600'
}
},
labels: {
style: {
fontFamily: 'Roboto',
fontSize: '12px'
}
}
}],
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
enabled: true,
align: 'left',
crop: false,
style: {
color: '#ff0000',
fontWeight: 'bold'
},
formatter: function() {
return this.series.options.cost
},
y: -20,
x: 0,
verticalAlign: 'top'
}
}
},
series: [{
"name": "Plant",
"data": [11,34,24,11],
"cost": 23
},
{
"name": "Ship",
"data": [23,13,15,24],
"cost": 34,
"dataLabels": {
enabled: false
}
},
{
"name": "Equipment",
"data": [23,16,24,42],
"cost": 33,
"dataLabels": {
enabled: false
}
},
{
"name": "Cargo",
"data": [23,34,33,24],
"cost": 24,
"dataLabels": {
enabled: false
}
}]
}
然而,正如您所看到的,它显示所有列的23而不是每个单独系列的成本。我还禁用了其他3个系列的数据标签,否则它会将数据标签放在每个堆栈而不是每个列上。
如何根据我的屏幕截图显示每列的正确费用?