嗨,我需要自定义高图表堆叠列中的每一列
我给出了这样的实现
{
categories:["6-7","7-8"]
series: [{
name: 'pass',
data: [5, 3, 4, 7, 2]
}, {
name: 'Fail',
data: [2, 2, 3, 2, 1]
}]
}
但是现在我需要更改这个实现,我必须自定义每个列并添加类别--如何实现这一点--我有这样一个数组
[{"pass":2,"fail":3,"category":"6-7","percentage":"20%"}
{"pass":5,"fail":0,"category":"7-8","percentage":"10%"}]
我想要这样
|percentage|
------------
| pass |
| fail |
-----------------
category
发布于 2020-06-29 09:42:24
您需要对数据进行预处理,以创建高级图表所需的系列结构。使用name
属性可以实现“类别”标签,通过堆栈标签格式化程序可以实现“百分比”:
var data = [{
"pass": 2,
"fail": 3,
"category": "6-7",
"percentage": "20%"
}, {
"pass": 5,
"fail": 0,
"category": "7-8",
"percentage": "10%"
}];
var series = [{
name: 'Pass',
data: []
}, {
name: 'Fail',
data: []
}];
data.forEach(function(dataObj) {
series[0].data.push({
y: dataObj.pass,
name: dataObj.category,
percentage: dataObj.percentage
});
series[1].data.push({
y: dataObj.fail,
name: dataObj.category
});
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
yAxis: {
stackLabels: {
enabled: true,
formatter: function() {
return this.axis.series[0].options.data[this.x].percentage;
}
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: series
});
现场演示: http://jsfiddle.net/BlackLabel/nfbq2soe/
API参考: https://api.highcharts.com/highcharts/yAxis.stackLabels.formatter
https://stackoverflow.com/questions/62606017
复制相似问题