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はOKロードし、シリーズを記入します Series 1, Series 2 ....
しかし、グラフィックは作られていません、彼は空白を保ちます。 ( このようなもの: デモ).
何かが足りないかどうか知りたい。
ありがとう
更新:SQLを変更しましたが、今では2つのフィールドで作業しています。これにより、Grafic Work Perfectが完璧です。
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コードが上記の1つの配列に一致するJSONを生成することを確認してください。 series.data = value
あなたの内側 $.each
動作します。
アップデート:申し訳ありませんが、私は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
探しているフィールドの1つです。ただし、データは3つの形式のいずれかである必要があります。
- 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);