在HighChart中绘制下面的json

时间:2016-01-27 10:00:14

标签: javascript jquery json highcharts

以下是Json格式1.1的json对象

    {
       "JSONVersion":1.1,
       "DataBehaviour":"Timebased",
       "MeasurementUnit":"MB",
       "Error":"",
       "DataSeries":[
          {
             "name":"AvailableMBytes",
             "data":[
                {
                   "x":1396602300000,
                   "y":"1156"
                },
                {
                   "x":1396605900000,
                   "y":"1137.05"
                }
             ]
          }
       ]
}

是否可以在高图中绘制数据?我的代码看起来像这样,但没有显示任何输出。

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline'
        },
        series: [{}]
    };

    $.getJSON('data.json', function(data1) {
        options.series[0].data = data1.data;
        var chart = new Highcharts.Chart(options);
         });

});

1 个答案:

答案 0 :(得分:2)

如果它的数组如图所示,则迭代它 这是working demo

的链接

json需要编号而不是字符串:

{
   "JSONVersion":1.1,
   "DataBehaviour":"Timebased",
   "MeasurementUnit":"MB",
   "Error":"",
   "DataSeries":[
      {
         "name":"AvailableMBytes",
         "data":[
            {
               "x":1396602300000,
               "y":1156 
            },
            {
               "x":1396605900000,
               "y":1137.05
            }
         ]
      }
   ]
}

和图表代码

$.getJSON('data.json', function(data1) { 
    options.series[0].data = data1.DataSeries[0].data;
    options.series[0].name = data1.DataSeries[0].name;
    var chart = new Highcharts.Chart(options);
     });

您可以直接将“item”串联起来,因为它有名称和数据。