通过 Ajax 从 PHP 使用 JSON 生成 HighCharts 图形

Question

我正在创建一个包含多个用户可定义图表的页面。

当图表详细信息发生更改时，它会通过 Ajax 调用保存到服务器，然后必须重新创建图表。

我正在尝试通过生成 JSON 返回浏览器来在服务器端的 PHP 中创建图形。

到目前为止，我的问题是在从服务器取回 json 数据后渲染图形。

问题似乎在于 json 中包含系列数据。

返回的 JSON 如下所示：

{"chart":{   "type":["column"]},
   "credits":false,
   "legend":{"enabled":false},
   "title":{"text":"Turnover by Product","align":"left","y":7,
          "style":{"fontSize":"10px"}},
   "xAxis":{"title":{"text":"Total Sales"}},
   "series":[
         {"name":"BA","data":[22375004.21]},
         {"name":"FR","data":[82542490.9]},
         {"name":"GA","data":[531139.77]},
         {"name":"MS","data":[112142]},
         {"name":"ON","data":[23464497.44]},
         {"name":"PO","data":[74623237.35]},
         {"name":"TO","data":[25845184.81]},
         {"name":"VG","data":[51496496.25]},
         {"name":"WM","data":[6849331.4]}]}
}

当我尝试时：

var cgraphdata = $.ajax({
   url: "/graphs/data/format/json",
   global: false,
   type: "POST",
   dataType: "json",
   data: {type:graphtypeID},
   async: false,
   success: function(data) {
        }
}).responseText; // json returned in cgraphdata
var rgResult = JSON.parse(cgraphdata); // convert to javascript object
// currentGraph = id of container div for current graph
rgResult.chart.renderTo = currentGraph;  // set render target
newGraph = new Highcharts.Chart(rgResult);  // create chart

这会导致 Highcharts 错误 14。如果我排除数据，我会得到一个带有标题和轴的空白图表。

这是否意味着创建图表后必须单独加载数据（上面的最后一行）？

编辑： 我检查了为每个数据系列传递的值是否为数字 - 错误 14 暗示文本作为数据值传递。

理查德

Answer 1

AJAX 是异步的，因此您应该在成功处理程序中进行图形更新。此外，只要您将数据作为带有正确标头的 JSON 提供，它就应该已经在处理程序中进行了解析，并且您不需要指定 dataType。

所以，类似的东西。

$.ajax({
   url: "/graphs/data/format/json",
   type: "POST",
   data: {type:graphtypeID},
   success: function(result)
   {
       new Highcharts.Chart(result);
   }
});

（当然，您需要在处理程序中做正确的事情，我只是不确定您的情况是什么，所以我总结了一下：）