javascript 如何在 HighCharts 中为堆栈柱形图格式化我的 json 数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11472947/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to format my json data for stack column chart in HighCharts
提问by sozhen
Here is my json data
这是我的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}
];
unitis the category
unit是类别
I want the data could be formatted in the following way so that I can plug in to seriesoption in HighCharts:
我希望数据可以按以下方式格式化，以便我可以插入seriesHighCharts中的选项：
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]}]
});
Thank you.
谢谢你。
回答by Sujay
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]}
}
}
Now that you've seriesDataand xCategoriesyou can instantiate the chart by using something similar to
既然您已经seriesData并且xCategories可以使用类似的东西来实例化图表
chart = new Highchart({chart: {renderTo: 'chart-div',
type: 'column'
},
plotOptions: {column: {stacking: 'normal'}},
xAxis:{ categories: xCategories},
series: seriesData
});
EDIT: Here's the jsFiddle: http://jsfiddle.net/sujay/UMeGS/
编辑：这是 jsFiddle：http: //jsfiddle.net/sujay/UMeGS/
回答by jasonmerino
On the HighCharts website I navigated to the Demo Gallery > HighChart demos section and clicked on Stacked column on the left side of the page. From there they had a link to a JSFiddle with a demoand from there I saw two sections of code that are pertinent to you.
在 HighCharts 网站上，我导航到 Demo Gallery > HighChart demos 部分并单击页面左侧的 Stacked 列。从那里他们有一个带有演示的JSFiddle的链接，从那里我看到了与您相关的两段代码。
The first section is the xAxisproperty of the HighChart object. Here's what I changed it to:
第一部分是xAxisHighChart 对象的属性。这是我将其更改为：
xAxis: {
categories: ['Unit A', 'Unit B']
}
Those are going to be each of the columns that you are stacking the data upon.
这些将是您在其上堆叠数据的每一列。
The next section is the seriesproperty. This is where you pass in the data that you are looking to graph into those columns. It looks like this:
下一部分是series财产。这是您将要绘制的数据传递到这些列中的地方。它看起来像这样：
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]
}]
In this portion you specify the name of the particular type of data and then the values for each column you specified in the xAxisproperty.
在此部分中，您指定特定数据类型的名称，然后指定您在xAxis属性中指定的每一列的值。
I played around with some of the options really quick and there is so much more that you can do with this, but here's the JSFiddlewith a stacked column graph and your data.
我很快就使用了一些选项，你可以用它做更多的事情，但这里是带有堆积柱形图和数据的 JSFiddle。
Hope this helps!
希望这可以帮助！
