将 JSON 加载到 Highcharts 饼图中答案

【问题标题】：Loading JSON into a Highcharts pie chart将 JSON 加载到 Highcharts 饼图中
【发布时间】：2016-07-26 21:25:33
【问题描述】：

我认为我可能有一个简单的问题。这很好用..

$(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({

【问题讨论】：

不确定是否相关，但您的 "y" 值在您的第二个版本中有双引号，而在第一个版本中没有。

标签： javascript jquery json highcharts getjson

【解决方案1】：

我使用上面给出的数据。我认为 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 以获取正确的对象，然后您最终可以将其传递给 highchart

【讨论】：

hiEven：就是这样！我修改了上面的答案以评估值并删除引号。

【解决方案2】：

您能否检查您对getJSON 的回复是否为json 字符串？如果是，您应该这样做：

var data = JSON.parse(json);

【讨论】：

【解决方案3】：

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

首先，在 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!!!

【讨论】：