如何格式化我的堆栈柱状图JSON数据HighCharts

Question

这里是我的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} 
]; 

unit是我想要的数据可以通过以下方式进行格式化类别

让我能在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]}] 
     }); 

谢谢。

Answer 1

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]} 
    } 
} 

，你已经seriesData和xCategories您可以通过使用类似的东西图表实例化

chart = new Highchart({chart: {renderTo: 'chart-div', 
            type: 'column' 
            }, 
          plotOptions: {column: {stacking: 'normal'}}, 
          xAxis:{ categories: xCategories}, 
          series: seriesData 
         }); 

编辑：这里是的jsfiddle：http://jsfiddle.net/sujay/UMeGS/

Answer 2

在HighCharts网站上，我导航到演示库> HighChart演示部分，并单击页面左侧的堆叠列。从那里他们有一个链接到JSFiddle with a demo，从那里我看到了与您相关的两段代码。

第一部分是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属性指定每一列的值。

我玩过一些选项非常快，有很多你可以用这个做的，但here's the JSFiddle带有堆积列图和你的数据。

希望这会有所帮助！现在