將JSON加載到Highcharts餅圖

我想我可能有一個簡單的問題。這個偉大的工程..將JSON加載到Highcharts餅圖

$(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 }] }); }); });

我查了JSON在Firebug和它使用「名」和「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({

來源

2016-07-26 Jane WIlkie

不確定它是否相關，但您的''y'''值在第二個版本中有雙引號，並且不在第一個引號中。 – pmahomme

我使用上面給出的數據。我認爲highchart只是不接受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首先要得到正確的對象，然後你終於可以通過它進入高圖

來源

2016-07-27 02:20:18 Even

hiEven：就是這樣！我修改了上面的答案以評估值並刪除引號。 –

你能確認你的getJSON響應是JSON字符串？如果是的話，你應該這樣做：

var data = JSON.parse(json);

來源

2016-07-27 02:17:50 TTCC

這是我的解決方案來更新MySQL餅圖使用jQ uery

首先，在PHP中：創建數組與值/名稱對的數組，並確保您返回「json_encode」 d數據：

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

二，創建圖表：

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

第三，建立jQuery代碼檢索數據：

$.ajax({ 
     type  : 'post', 
     url  : '/path/to/the/above/php/data-script.php', 
     dataType : 'json' 
    }).done(function(oJson) { 
     var oObj = []; 
     $.each(oJson, function(ix,sliceData) { 
     oObj.push({ 
      name: sliceData.name, 
      y: eval(sliceData.y) 
     }); 
     }); 
     oGraph.series[0].setData(oObj, true); 
    });

我花了一整天認識到，我不得不（1）重新打包數據和（2）使用eval（）作爲值參數y !!!

來源

2018-01-13 19:00:46 user1376490

將JSON加載到Highcharts餅圖

回答

相關問題