如何在HighCharts中为我的json数据格式化堆栈列表 [英] How to format my json data for stack column chart in HighCharts
本文介绍了如何在HighCharts中为我的json数据格式化堆栈列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这是我的json数据
var data = [
{"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
{"unit":"a", "status":"Working", "val":53.3066666666666667},
{"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
{"unit":"a", "status":"Transport", "val":5.1425000000000000},
{"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
{"unit":"b", "status":"Working", "val":212.6386111111111111},
{"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
{"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];
单位
是类别
我希望数据可以按照以下方式格式化,以便我可以在HighCharts中插入系列
选项:
I want the data could be formatted in the following way so that I can plug in to series
option in HighCharts:
series: [{
name: 'Stopped / Idle',
data: [21.2022222222222222, 334.7358333333333333]},
{
name: 'Working',
data: [53.3066666666666667, 212.6386111111111111]},
{
name: 'Headland Turning',
data: [0.04694444444444444444, 26.2955555555555556]},
{
name: 'Transport',
data: [5.1425000000000000, 0.00444444444444444444]}]
});
谢谢。
推荐答案
var data = [
{"unit":"a", "status":"Stopped / Idle", "val":21.2022222222222222},
{"unit":"a", "status":"Working", "val":53.3066666666666667},
{"unit":"a", "status":"Headland Turning", "val":0.04694444444444444444},
{"unit":"a", "status":"Transport", "val":5.1425000000000000},
{"unit":"b", "status":"Stopped / Idle", "val":334.7358333333333333},
{"unit":"b", "status":"Working", "val":212.6386111111111111},
{"unit":"b", "status":"Headland Turning", "val":26.2955555555555556},
{"unit":"b", "status":"Transport", "val":0.00444444444444444444}
];
var seriesData = [];
var xCategories = [];
var i, cat;
for(i = 0; i < data.length; i++){
cat = 'Unit ' + data[i].unit;
if(xCategories.indexOf(cat) === -1){
xCategories[xCategories.length] = cat;
}
}
for(i = 0; i < data.length; i++){
if(seriesData){
var currSeries = seriesData.filter(function(seriesObject){ return seriesObject.name == data[i].status;});
if(currSeries.length === 0){
currSeries = seriesData[seriesData.length] = {name: data[i].status, data: []};
} else {
currSeries = currSeries[0];
}
var index = currSeries.data.length;
currSeries.data[index] = data[i].val;
} else {
seriesData[0] = {name: data[i].status, data: [data[i].val]}
}
}
现在您已经 xCategories
您可以通过类似于
Now that you've seriesData
and xCategories
you can instantiate the chart by using something similar to
chart = new Highchart({chart: {renderTo: 'chart-div',
type: 'column'
},
plotOptions: {column: {stacking: 'normal'}},
xAxis:{ categories: xCategories},
series: seriesData
});
编辑:这里是jsFiddle: http://jsfiddle.net/sujay/UMeGS/
Here's the jsFiddle: http://jsfiddle.net/sujay/UMeGS/
这篇关于如何在HighCharts中为我的json数据格式化堆栈列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文