2016-03-02 52 views
0

我想从json文件中获取图表数据。使用它的第一次,以保持它从高图文档复制。但它不起作用。如何在高图中从json文件中获取数据

JSON:

[ 
       { "name" : "Asia", "data" :[4502, 635, 809, 947, 1402, 3634, 5268] }, 
       { "name" : "Africa", "data" : [106, 107, 111, 133, 221, 767, 1766] }, 
       { "name" : "Europe", "data" : [163, 203, 276, 408, 547, 729, 628] }, 
       { "name" : "America", "data" : [18, 31, 54, 156, 339, 818, 1201] }, 
       {"name" : "Oceania", "data" : [2, 2, 2, 6, 13, 30, 46] } 
      ] 

脚本:

<script> 
$(function() { 
    var options = { 
     chart: { 
      renderTo: 'container', 
      type: 'spline' 
     }, 
     title: { 
      text: 'Historic and Estimated Worldwide Population Growth by Region' 
     }, 
     subtitle: { 
      text: 'Source: Wikipedia.org' 
     }, 
     xAxis: { 
      categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'], 
      tickmarkPlacement: 'on', 
      title: { 
       enabled: false 
      } 
     }, 
     yAxis: { 
      title: { 
       text: 'Billions' 
      }, 
      labels: { 
       formatter: function() { 
        return this.value/1000; 
       } 
      } 
     }, 
     tooltip: { 
      shared: true, 
      valueSuffix: ' millions' 
     }, 
     plotOptions: { 
      area: { 
       stacking: 'normal', 
       lineColor: '#666666', 
       lineWidth: 1, 
       marker: { 
        lineWidth: 1, 
        lineColor: '#666666' 
       } 
      } 
     }, 
     series: [{}] 




    }; 


$.getJSON('http://s000.tinyupload.com/?file_id=46814948573049842058', function(data) { 
     options.series[0].data = data; 
     var chart = new Highcharts.Chart(options); 
    }); 
}) 
</script> 

控制台不显示任何错误。任何人都可以看到代码的问题。

回答

2

我无法从我的作品模仿你的代码,但是,这应该修复它:

  • 的TinyUpload犯规允许访问你data.json直接。把它放在你可以的地方 。 (OBS:这不是JSON文件,它是描述数组/对象结构的字符串 ,应先将其转换为 json格式);

如果你决定接受它作为一个字符串,无论如何,做到这一步:

  • 当你接收到的数据,利用Eval() function
    转换成与数组/对象,然后把它转换成HighChart脚本。

var string = '['+ 
       '{ "name" : "Asia", "data" :[4502, 635, 809, 947, 1402, 3634, 5268] },'+ 
       '{ "name" : "Africa", "data" : [106, 107, 111, 133, 221, 767, 1766] },'+ 
       '{ "name" : "Europe", "data" : [163, 203, 276, 408, 547, 729, 628] },'+ 
       '{ "name" : "America", "data" : [18, 31, 54, 156, 339, 818, 1201] },'+ 
       '{"name" : "Oceania", "data" : [2, 2, 2, 6, 13, 30, 46] }'+ 
      ']'; 
var yourDataObject = eval(string); 

PS: 我想加载它是数据的正确方法:

options.series = data; 
+0

我做错了几件事情。 1)TinyUpload不允许直接访问.json。 2)我改变了'options.series [0] .data = data;'到'options.series = data;' 它现在开始工作。 – Praveen

相关问题