Javascript 如何在HighCharts中为堆栈柱形图格式化json数据
这是我的json数据Javascript 如何在HighCharts中为堆栈柱形图格式化json数据,javascript,json,highcharts,Javascript,Json,Highcharts,这是我的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":
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中的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]}]
});
多谢各位 在HighCharts网站上,我导航到Demo Gallery>HighChart demos部分,并单击页面左侧的堆叠列。从那里他们有一个到a的链接,从那里我看到了与您相关的两段代码 第一部分是HighChart对象的xAxis属性。以下是我将其更改为:
xAxis: {
categories: ['Unit A', 'Unit B']
}
这些将是您要在其上堆叠数据的每一列
下一节是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]
}]
在本部分中,您将指定特定类型数据的名称,然后指定在xAxis属性中指定的每列的值
我很快就处理了一些选项,你可以做更多的事情,但是使用堆叠的柱状图和数据
希望这有帮助 在HighCharts网站上,我导航到Demo Gallery>HighChart demos部分,并单击页面左侧的堆叠列。从那里他们有一个到a的链接,从那里我看到了与您相关的两段代码
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]}
}
}
第一部分是HighChart对象的xAxis属性。以下是我将其更改为:
xAxis: {
categories: ['Unit A', 'Unit B']
}
这些将是您要在其上堆叠数据的每一列
下一节是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]
}]
在本部分中,您将指定特定类型数据的名称,然后指定在xAxis属性中指定的每列的值
我很快就处理了一些选项,你可以做更多的事情,但是使用堆叠的柱状图和数据
希望这有帮助
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]}
}
}
编辑:以下是JSFIDLE:
编辑:这里是jsFiddle:这是一个有点硬的代码。事实上,我想用我的数据进行一些格式化,以插入highcharts选项Hey@Songtao Z,我想我还不太了解这个问题。你的数据在我做的例子中被使用了,我不得不重新排列它,这里有一些额外的选项。我把它们放在那里是为了让你看到更多的可能性。对不起,杰森,谢谢你的回答。我已经更新了我的问题以防混淆。我实际上知道如何将HighCharts选项的哪一部分放在我的数据中,只是不知道如何处理我的JSON数据,以便可以通过图表选项识别,而无需任何硬编码,这意味着我不需要手动将任何数据放在选项中。实际上@Sujay所做的正是我想要的,但他的代码不起作用。昨天我已经玩了一段时间他的代码,仍然不知道如何插入我的json数据。这是一个有点硬的代码。事实上,我想用我的数据进行一些格式化,以插入highcharts选项Hey@Songtao Z,我想我不太理解这个问题。你的数据在我做的例子中被使用了,我不得不重新排列它,这里有一些额外的选项。我把它们放在那里是为了让你看到更多的可能性。对不起,杰森,谢谢你的回答。我已经更新了我的问题以防混淆。我实际上知道如何将HighCharts选项的哪一部分放在我的数据中,只是不知道如何处理我的JSON数据,以便可以通过图表选项识别,而无需任何硬编码,这意味着我不需要手动将任何数据放在选项中。实际上@Sujay所做的正是我想要的,但他的代码不起作用。昨天我已经玩了一段时间他的代码,仍然不知道如何插入我的json数据。谢谢,我想你的可能是对的。但在我的地方不行,请你把一件作品放在提琴上好吗?感谢you@SongtaoZ我已经根据请求添加了jsfiddle,并在这里修复了某些错误。很抱歉最初的混乱。我写那个答案时很匆忙。谢谢。这就是我最终的目的。我必须从你身上学到很多!自从Highcharts 3.0以来,还可以通过给每个点一个名称并将axis type设置为category来提取类别。谢谢,我想你的可能是对的。但在我的地方不行,请你把一件作品放在提琴上好吗?感谢you@SongtaoZ我已经根据请求添加了jsfiddle,并在这里修复了某些错误。很抱歉最初的混乱。我写那个答案时很匆忙。谢谢。这就是我最终的目的。我必须从你身上学到很多!自Highcharts 3.0以来,还可以通过为每个点指定名称并将轴类型设置为“类别”来提取类别。