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

我正在创建一个包含用户可定义的多个图表的页面。通过Ajax使用PHP中的JSON生成HighCharts图形

当图表细节发生变化时，它通过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暗示文本作为数据值传递。

Richard

来源

2013-03-07 Rich

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

所以，沿着这些线。

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

（你需要做的正确的事情，当然处理程序，我只是不知道这将是你的情况，所以我总结它:)

来源

2013-03-07 09:56:42 Svish

感谢您的答复。我的问题是，我正在创建包含系列数据的整个图形，并将其传递给Highcharts的构造函数。我最近的努力持续循环高潮。我真正的问题是：是否必须在创建图表对象后添加系列数据，还是可以像我从服务器端尝试完成一样来完成。 – Rich 2013-03-07 10:19:50

啊，好吧，如果你从服务器返回的json看起来像Chart构造函数吃的东西，那么我不明白为什么这不应该起作用。更新示例。 – Svish 2013-03-07 12:55:33

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

回答

相关问题