我使用 HighCharts 制作了以下图表:
每列上方的红色数字是从每个季度的系列数据中提取的。我使用带有自定义数据的数据标签来实现这一点:
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 个系列的数据标签，否则它会将数据标签放在每个堆栈而不是每个列上。
如何根据屏幕截图显示每列的正确成本？
最佳答案
堆栈的标签可以通过 yAxis 设置，称为 stackLabels .
...
yAxis: [{
stackLabels: {
enabled: true,
align: 'right',
style: {
color: '#ff0000',
fontWeight: 'bold'
},
x: -5,
verticalAlign: 'top'
}
...
JSFiddle:http://jsfiddle.net/8e08b387/1/
关于javascript - 每个堆叠列的 Highcharts 数据标签，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33831853/