HighCharts通过Json加载数据

我想从我的Json数据制作HighCharts图表。这里是我的JSON数据HighCharts通过Json加载数据

[{"ReadData":"99","Time":"07\/09\/2015 00:00:07"},{"ReadData":"101","Time":"07\/09\/2015 00:01:07"},{"ReadData":"113","Time":"07\/09\/2015 00:02:07"},{"ReadData":"115","Time":"07\/09\/2015 00:03:07"},{"ReadData":"96","Time":"07\/09\/2015 00:04:07"},{"ReadData":"103","Time":"07\/09\/2015 00:05:07"}]

我的问题是，当该图形不加载，我在做什么错？这是我的代码HTML。

<html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://code.highcharts.com/highcharts.js"></script> 
    <script src="http://code.highcharts.com/modules/exporting.js"></script> 
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
    <script> 

     $(document).ready(function() { 

    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'spline' 
     }, 
     series: [{}] 
    }; 

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

}); 
    </script>   
    </head> 
</html>

来源

2015-09-09 Maria Margarida Brito

JSON [ 0] ['Time']被替换为json [0] .Time;如果你能分享你的问题，那就更好了。初始化一个数组，并将时间和其他值放入其中，然后以高位图调用。 –

有一对夫妇的问题，请参见工作演示：http://jsfiddle.net/ux74929j/5/

让我解释一下：

您的格式与Highcharts兼容，您正尝试使用此错误的方法，首先解析你的数据：

 var categories = [], 
      points = []; 

     $.each(JSON, function(i, el) { // Assuming that JSON is data from getJSON() 
      categories.push(el.Time); 
      points.push(parseFloat(el.ReadData)); // Another issue - data should be number, not string 
     }); 
     options.xAxis.categories = categories; 
     options.series[0].data = points; 
     var chart = new Highcharts.Chart(options);

你没有在选项xAxis，但是你想分配categories反正：

var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'spline' 
     }, 
     xAxis: {}, 
     series: [{}] 
    };

所以，综上所述，你应该代码如下所示：

 var options = { 
      chart: { 
       renderTo: 'container', 
       type: 'spline' 
      }, 
      xAxis: {}, 
      series: [{}] 
     }; 

     $.getJSON('data.json', function (data) { 
      var categories = [], 
       points = []; 

      $.each(data, function(i, el) { 
       categories.push(el.Time); 
       points.push(parseFloat(el.ReadData)); 
      }); 
      options.xAxis.categories = categories; 
      options.series[0].data = points; 
      var chart = new Highcharts.Chart(options); 
     });

来源

2015-09-09 12:34:29

非常感谢我的朋友，这是一个非常好的解释！ –

HighCharts通过Json加载数据

回答

相关问题