如何格式化我的堆棧柱狀圖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帶有堆積列圖和你的數據。

希望這會有所幫助！現在