使用JSON數據創建動態Highcharts圖

Question

我json輸出數據：

[{"hour":"6","value1":"10","value2":"5","value3":"0","value4":45},{"hour":"7","value1":"0","value2":"10","value3":"0","value4":50}] 

而且我需要highchart引擎來生成圖表 這裏是highchart的代碼片段，但我不知道如何將數據傳遞到'系列' 和 '類別'：

xAxis: { 
     categories: [ 
      'Jan', 
      'Feb', 
      'Mar', <------------------------here need to be a hours 
      'Apr', 
      'May', 
      'Jun', 
      'Jul', 
      'Aug', 
      'Sep', 
      'Oct', 
      'Nov', 
      'Dec' 
     ], 
     crosshair: true 
    }, 
    series: [{ 
     name: 'value1',  
     data: [49.9, 71.5] <----------------values 1 
    }, { 
     name: 'value2', 
     data: [83.6, 78.8] <----------------values 2 
    }, { 
     name: 'value3', 
     data: [48.9, 38.8] 

    }, 
    { 
     name: 'value4', 
     data: [42.4, 33.2] 

    }  ] 
}); 

Answer 1

https://jsfiddle.net/rb8ege93/1/

var json = [{"hour":"6","value1":"10","value2":"5","value3":"0","value4":45},{"hour":"7","value1":"0","value2":"10","value3":"0","value4":50}]; 
var categories = [], data1 = [], data2 = [], data3 = [], data4 = []; 
for(var i in json){ 
    var hour = (parseInt(json[i].hour)); 

    categories.push(hour); 

    data1.push(parseInt(json[i].value1)); 
    data2.push(parseInt(json[i].value2)); 
    data3.push(parseInt(json[i].value3)); 
    data4.push(parseInt(json[i].value4)); 
} 

    Highcharts.chart('container', { 
     chart: { 
      type: 'column' 
     }, 
xAxis: { 
     categories: categories , 
     crosshair: true 
    }, 
    yAxis: { 
      min: 0, 
      title: { 
       text: 'Total fruit consumption' 
      }, 
      stackLabels: { 
       enabled: true, 
       style: { 
        fontWeight: 'bold', 
        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray' 
       } 
      } 
     }, 
     legend: { 
      align: 'right', 
      x: -30, 
      verticalAlign: 'top', 
      y: 25, 
      floating: true, 
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white', 
      borderColor: '#CCC', 
      borderWidth: 1, 
      shadow: false 
     }, 
     tooltip: { 
      headerFormat: '<b>{point.x}</b><br/>', 
      pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}' 
     }, 
     plotOptions: { 
      column: { 
       stacking: 'normal', 
       dataLabels: { 
        enabled: true, 
        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white' 
       } 
      } 
     }, 
    series: [{ 
     name: 'value1',  
     data: data1 
    }, { 
     name: 'value2', 
     data: data2 
    }, { 
     name: 'value3', 
     data: data3 

    }, 
    { 
     name: 'value4', 
     data: data4 
    }] 
});