将JSON加载到Highcharts饼图中

时间:2016-07-26 21:25:34

标签: javascript jquery json highcharts getjson

我认为我可能拥有的是一个简单的问题。这很棒......

$(document).ready(function() { // Original data var data = [{ "name": "Tokyo", "y": 3.0 }, { "name": "NewYork", "y": 2.0 }, { "name": "Berlin", "y": 3.5 }, { "name": "London", "y": 1.5 }]; var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie' }, series: [{ data: data }] }); });

我想修改使用getJSON加载的代码,并正确格式化JSON。 所以我这样做了......

$(document).ready(function() { $.getJSON("etstats?rtype=bestpgs_ec&month=2016-06-01&no_requested=10", function(json){ var data = json var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'pie' }, series: [{ data: data }] }); }); });

我在Firebug中检查了JSON,并使用" name"正确格式化了它。和" y"

[{"name": "14704", "y": "0.17"}, {"name": "14706", "y": "0.20"}, {"name": "21304", "y": "0.25"}, {"name" : "23201", "y": "0.39"}, {"name": "23501", "y": "0.42"}, {"name": "17102", "y": "0.46"}, {"name": "15001" , "y": "0.48"}, {"name": "23002", "y": "0.50"}, {"name": "13201", "y": "0.50"}, {"name": "17401", "y" : "0.52"}]

有没有人知道为什么我的图表不会渲染?

注意:编辑添加答案。引用的值是问题。通过迭代它们并除去值来删除它们。

$.getJSON("etstats?rtype=bestpgs_ec&month=2016-06-01&no_requested=10", function(json){ data = json $.each(data, function (i, point) { point.y = eval(point.y); }); var chart = new Highcharts.Chart({

3 个答案:

答案 0 :(得分:1)

你能检查一下getJSON的回答是json字符串吗?如果是,你应该这样做:

var data = JSON.parse(json);

答案 1 :(得分:1)

我使用上面给出的数据。我认为高图只是不接受string

中的y类型

这是demo

有效的JSON格式应为

[
  {"name":"14704","y":0.17},
  {"name":"14706","y":0.2},
  {"name":"21304","y":0.25},
  {"name":"23201","y":0.39},
  {"name":"23501","y":0.42},
  {"name":"17102","y":0.46},
  {"name":"15001","y":0.48},
  {"name":"23002","y":0.5},
  {"name":"13201","y":0.5},
  {"name":"17401","y":0.52}
]

完成getJSON后,请记得首先执行JSON.parse以获取正确的对象,然后最终将其传递给高图

答案 2 :(得分:0)

这是我使用jQuery从MySQL更新饼图上的数据的解决方案

首先,在PHP中:创建一个包含值/名称对的数组数组,并确保返回" json_encode" d data:

MyPC\SQLDATA

其次,创建图表:

   ... [code] ...
   while($aRow = mysqli_fetch_assoc($oRes)){
      $aData[] = array("y" => $aRow['number'], "name" => $aRow['string']);
   }
   exit(json_encode($aData));

第三,构建jQuery代码以检索数据:

    oGraph = new Highcharts.chart({
       chart: {
          renderTo: 'graphid',
       ... [code] ...
       plotOptions: {
          pie: {
       ... [code] ...
       series: [{
          name: 'MyName',
          data: []
       ... [code] ...
   });

我花了一整天才意识到我必须(1)重新打包数据和(2)使用 eval()作为值参数y !!!