通过highcharts读取JSON数据

时间:2016-01-15 11:58:05

标签: javascript jquery json highcharts

我试图通过highcharts中的JSON文件读取并显示结果。我的json文件是这样的:

[
  {
    "key": "01/01/2009", 
    "value": {
       "Actual:number": "10000", 
       "Predicted:number": "30000"
    }
  }, 
  {
   "key": "01/02/2009", 
   "value": {
      "Actual:number": "40000", 
      "Predicted:number": "40000"
    }
  }, 
  {
   "key": "01/03/2009", 
   "value": {
      "Actual:number": "50000", 
      "Predicted:number": "20000"
   }
  }
]

我的问题是如何正确访问“value”键中的嵌套数据。从我到目前为止尝试过,我可以访问日期键,但不能访问值。我能以何种方式访问​​数据以进行显示?

$(function () {
    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        var processed_json = new Array();

        $.getJSON('http://localhost:9000/test.json', function(data){

            // populate series

            for (i = 0; i < data.length; i++){
                processed_json.push([new Date(data[i].key).getTime(), data[i].value]);
            }

            // draw chart

            $('#container').highcharts({

                chart: {
                    type: "column"
                },
                title: {
                    text: "Sample data"
                },
                xAxis: {
                    type: 'datetime',
                    allowDecimals: false,
                    title: {
                        text: ""
                    }
                },
                series: [{
                    name: 'Date of Repairs',
                    data: processed_json
                }]
            });
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>

<div id="container" style="height: 400px; min-width: 310px"></div>

0 个答案:

没有答案