PHP JSON Highcharts加载数据库结果
我被卡住了！
我需要用json结果创建高图。 我在这里找到了一些消息来源，但无法将其付诸实践。
我能得到的最接近的是这样做：
图表选项：
var options = { chart: { renderTo: 'tudo', defaultSeriesType: 'column', rightMargin: 80 }, title: { text: 'Weekdays' }, subtitle: { text: 'Source: somewhere in a calendar' }, xAxis: { labels: { enabled: false } }, yAxis: [ { min: 0, title: { text: 'Amount' } }, { linkedTo: 0, opposite: true } ], series: [] }; ajax电话：
$.getJSON('ajax/calc.ajax.php', function(data) { var series = []; $.each(data, function(key, value) { series.name = key; series.data = value; options.series.push(name); }); var chart = new Highcharts.Chart(options); });
highchart加载好，并用Series 1, Series 2 ....填充Series 1, Series 2 ....
但没有制作图形，他一直保持空白。 （像这样： 演示 ）。
想知道我是否遗漏了某些东西或一切。
谢谢
更新：我改变了sql，现在我正在使用2个字段，并且有了这个，完美的grafic工作，现在我只想知道这样做是否正常。
header('Content-Type: application/json'); while(!$res->EOF){ //$json = array("group" => "Web", "action" => "list"); $json[$res->fields["DESMAR"]] = array(intval($res->fields["QTD"])); //$json["users"] = array(array("name" => "JulioGreff", "status" => "online")); $res->MoveNext(); } echo json_encode($json);
在你的ajax电话中 –
$.getJSON('ajax/calc.ajax.php', function(data) { var series = []; // <---------------------- must be object not array $.each(data, function(key, value) { series.name = key; series.data = value; options.series.push(name); // <-------- it should be series not name }); var chart = new Highcharts.Chart(options); });
所以，它将如下 -
$.getJSON('ajax/calc.ajax.php', function(data) { $.each(data, function(key, value) { var series = {}; // <-------------------- moved and changed to object series.name = key; series.data = value; options.series.push(series); // <-------- pushing series object }); var chart = new Highcharts.Chart(options); });
另外，考虑到你收到的JSON -
{“nome”：“TRANSFORMADOR 250VA 0-230-380V / 0,24V-0-48V”，“modelo”：“TRANSFORMADOR”，“marca”：“SEIT”，“valor”：“318.87 | 542.08”，“ qtdade “：” 0" - }
你在$.each做什么 -
series.data = value;
没有意义。
series.data是一个数组。 所以，它看起来如下 -
[y1, y2, y3, ....] // array of numbers (which are y values)
或如下 -
[[x1, y1], [x2, y2], [x3, y3], ....] // array of arrays of pair of numbers (x and y values)
或如下 -
// array of objects which can have x and y values as properties [{ name: 'Point 1', color: '#00FF00', y: 0 }, { name: 'Point 2', color: '#FF00FF', y: 5 }]
因此，请确保您的PHP代码生成的JSON与上述某个数组匹配，然后在$.each series.data = value将起作用。
更新：对不起，我做Java，从来没有做过PHP，所以用PHP来帮助你。 但是，您可以尝试使用以下作为您的PHP，只是为了查看图表是否显示？
header('Content-Type: application/json'); $return_data = array( array(array(10, 20), array(20, 30), array(56, 30), array(50, 20)), array(array(10, 0), array(20, 10), array(56, 100), array(50, 40)) ); echo json_encode($return_data);
更新：在保持相同PHP的同时渲染饼图。
$.getJSON('ajax/calc.ajax.php', function(data) { var series = { // <-------------------- create just one series object type: 'pie', data: [] //data array for new series }; $.each(data, function(key, value) { series.data.push([key, value[0]]); }); options.series.push(series); // <-------- pushing series object var chart = new Highcharts.Chart(options); });
这应绘制饼图。
看起来问题在于您的PHP代码。 Highcharts希望系列能够遵循特定的格式 。 在你的情况下，事情可以解决（部分）因为name是它正在寻找的领域之一。 但是，数据必须采用以下三种格式之一：
- 一组y值（例如
[0, 1, 2]） - 数组数组（x，y值;例如
[[0,0], [1,1], [2,2]]） - 使用点属性会议的对象数组
我想你会想要最后一种格式。 例如：
var series = []; series.name = "series1"; series.data = {y: 10}; //very minimalistic example of the object format options.series.push(name);
要使代码正常工作，您可能需要将$.each函数的内部更改为以下内容：
$.each(data, function(key, value) { series.name = key; series.data = { y: value.property_you_are_interested_in }; options.series.push(name); });
…当然，如果你想使用其他forms之一，它也会很容易：
//First form (array of y values) var series = {}; series.data = []; $.each(data, function(key, value) { series.name = key; series.data.push(value.property_you_are_interested_in); }); options.series.push(series); //Second form (array of x, y values) var series = {}; series.data = []; $.each(data, function(key, value) { series.name = key; series.data.push([value.X_property_you_are_interested_in, value.Y_property_you_are_interested_in]); }); options.series.push(series);