PHP JSON HIGHCHARTS负载数据库结果
-
26-10-2019 - |
题
我卡住了!
我需要使用JSON结果创建Highchart。我在这里找到了一些资源,但无法实现。
我能得到的最接近的是这样做:
图表选项:
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 ....
但是没有图形,他保留了空白。 (这样的事情: 演示).
想知道我是否缺少任何东西。
谢谢
更新:我更改了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”,“ seit”,“ valor”:“ 318.87 | 542.08”,“,”,“ qtdade“:“ 0” ??}
你在做什么 $.each
-
series.data = value;
没有意义。
系列 是一个数组。所以,看起来像 任何一个 如下 -
[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,然后 series.data = value
你内心 $.each
将工作。
更新:抱歉,我做爪哇,从未做过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);
});
...当然,如果您想使用其他形式之一,那也很容易:
//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);