我需要一些帮助来转换下面的代码,以便根据从DB返回的值构建系列数据。
var options = {
"chart": {
"type": "column",
"zoomType": "xy",
"inverted": true
},
"plotOptions": {
"series": {
"stacking": "percent"
},
"column": {
"allowPointSelect": true
},
"bar": {
"selected": true
}
},
"title": {
"text": "MT Messages"
},
"xAxis": {
"title": {
"text": null
},
"type": "category"
},
"series": [
{
"index": 0,
"dataLabels": {
"enabled": true
},
"name": 101,
"data": [
[
"Today",
5
],
[
"This Week",
3
],
[
"Last Week",
4
],
[
"Last Month",
127
]
]
},
{
"index": 1,
"dataLabels": {
"enabled": true
},
"name": 103,
"data": [
[
"Today",
2
],
[
"This Week",
2
],
[
"Last Week",
3
],
[
"Last Month",
20000
]
]
},
{
"index": 2,
"dataLabels": {
"enabled": true
},
"name": 202,
"data": [
[
"Today",
3
],
[
"This Week",
4
],
[
"Last Week",
4
],
[
"Last Month",
2
]
]
}
]
};
我将其替换为:
var data = [['Today', 12], ["This Week", 13], ["Last Week", 23], ["Last Month", 100]];
var barChart = $(function() {
$('#barChart').highcharts({
"chart": {
"type": "column",
"zoomType": "y",
"inverted": false
},
"plotOptions": {
"series": {
"stacking": "percent"
},
"column": {
"allowPointSelect": true
},
"bar": {
"selected": true
}
},
"title": {
"text": "MT Messages"
},
"xAxis": {
"title": {
"text": null
},
"type": "category"
},
"series": [
{
"index": 0,
"dataLabels": {
"enabled": true
},
"name": 101,
"data":data
},
{
"index": 1,
"dataLabels": {
"enabled": true
},
"name": 103,
"data": data
},
{
"index": 2,
"dataLabels": {
"enabled": true
},
"name": 202,
"data":data
}
]
});
});
但是,我的所有列都包含每个索引的相同值
我可能会看到这一切都错了,也许我的阵列需要像:
data = ['今天',12,13,52],['本周',123,3466,56] ......等等
但是根本无法渲染图表。
答案 0 :(得分:2)
您为每个系列使用相同的数据数组值,这就是它们看起来相同的原因。我是你的第一个例子,每个系列都有一组不同的数据。要在第二个中执行此操作,您应为每个系列使用不同的数据数组:
var data1 = [['Today', 12], ["This Week", 13], ["Last Week", 23], ["Last Month", 100]];
var data2 = [['Today', 5], ["This Week", 15], ["Last Week", 12], ["Last Month", 203]];
...
"series": [
{
"index": 0,
"dataLabels": {
"enabled": true
},
"name": 101,
"data":data1
},
{
"index": 1,
"dataLabels": {
"enabled": true
},
"name": 103,
"data": data2
},
etc.