我试图在从JSON中提取数据时显示图表。
这是我的php文件，它编码我的json：
<?php
header("content-type: application/json");
$chartData = array (
0 =>
array (
'country' => 'Utilities',
'litres' => 501.8999999999999772626324556767940521240234375,
'color' => '#1faf4b',
),
1 =>
array (
'country' => 'Insurance',
'litres' => 301.8999999999999772626324556767940521240234375,
'color' => '#79cf93',
),
2 =>
array (
'country' => 'Telcos',
'litres' => 201.099999999999994315658113919198513031005859375,
'color' => '#a5dfb7',
),
3 =>
array (
'country' => 'Entertainment',
'litres' => 165.80000000000001136868377216160297393798828125,
'color' => '#d2efdb',
),
4 =>
array (
'country' => 'Other',
'litres' => 139.900000000000005684341886080801486968994140625,
'color' => '#ffffff',
),
);
$chartDataRight = array (
0 =>
array (
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'year' => 2009,
'date' => '20093rd MAR',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
1 =>
array (
'year' => 2009,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20093rd Apr',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
2 =>
array (
'year' => 2009,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20093rd May',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
3 =>
array (
'year' => 2009,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20093rd June',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
4 =>
array (
'year' => 2009,
'income' => 50.60000000000000142108547152020037174224853515625,
'expenses' => 27.199999999999999289457264239899814128875732421875,
'value' => 10.2509999999999994457766661071218550205230712890625,
'dashLengthLine' => 5,
'date' => '20093rd Jul',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
5 =>
array (
'year' => 2009,
'income' => 34.10000000000000142108547152020037174224853515625,
'expenses' => 29.89999999999999857891452847979962825775146484375,
'dashLengthColumn' => 5,
'alpha' => 0.200000000000000011102230246251565404236316680908203125,
'value' => 50.28099999999999880628820392303168773651123046875,
'additional' => '(projection)',
'date' => '20093rd Aug',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
6 =>
array (
'year' => 2009,
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'date' => '20093rd Sep',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
7 =>
array (
'year' => 2009,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20093rd Oct',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
8 =>
array (
'year' => 2009,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20093rd Nov',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
9 =>
array (
'year' => 2009,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20093rd Dec',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
10 =>
array (
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'year' => 2010,
'date' => '20103rd MAR',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
11 =>
array (
'year' => 2010,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20103rd Apr',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
12 =>
array (
'year' => 2010,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20103rd May',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
13 =>
array (
'year' => 2010,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20103rd June',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
14 =>
array (
'year' => 2010,
'income' => 50.60000000000000142108547152020037174224853515625,
'expenses' => 27.199999999999999289457264239899814128875732421875,
'value' => 10.2509999999999994457766661071218550205230712890625,
'date' => '20103rd Jul',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
15 =>
array (
'year' => 2010,
'income' => 34.10000000000000142108547152020037174224853515625,
'expenses' => 29.89999999999999857891452847979962825775146484375,
'value' => 50.28099999999999880628820392303168773651123046875,
'date' => '20103rd Aug',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
16 =>
array (
'year' => 2010,
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'date' => '20103rd Sep',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
17 =>
array (
'year' => 2010,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20103rd Oct',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
18 =>
array (
'year' => 2010,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20103rd Nov',
'color' =>
array (
0 => '#178539',
1 => '#1faf4b',
),
'strColor' => 'white',
),
19 =>
array (
'year' => 2017,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20173rd Dec',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
20 =>
array (
'year' => 2017,
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'date' => '20117rd MAR',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
21 =>
array (
'year' => 2017,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20117rd Apr',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
22 =>
array (
'year' => 2017,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20117rd May',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
23 =>
array (
'year' => 2017,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20173rd June',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
24 =>
array (
'year' => 2017,
'income' => 50.60000000000000142108547152020037174224853515625,
'expenses' => 27.199999999999999289457264239899814128875732421875,
'value' => 10.2509999999999994457766661071218550205230712890625,
'dashLengthLine' => 5,
'date' => '20173rd Jul',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
25 =>
array (
'year' => 2017,
'income' => 34.10000000000000142108547152020037174224853515625,
'expenses' => 29.89999999999999857891452847979962825775146484375,
'dashLengthColumn' => 5,
'alpha' => 0.200000000000000011102230246251565404236316680908203125,
'value' => 50.28099999999999880628820392303168773651123046875,
'date' => '20173rd Aug',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
26 =>
array (
'year' => 2017,
'income' => 53.5,
'expenses' => 18.10000000000000142108547152020037174224853515625,
'value' => 60.3070000000000021600499167107045650482177734375,
'date' => '20173rd Sep',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
27 =>
array (
'year' => 2017,
'income' => 26.199999999999999289457264239899814128875732421875,
'expenses' => 22.800000000000000710542735760100185871124267578125,
'value' => 10.16799999999999926103555480949580669403076171875,
'date' => '20173rd Oct',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
28 =>
array (
'year' => 2017,
'income' => 30.10000000000000142108547152020037174224853515625,
'expenses' => 23.89999999999999857891452847979962825775146484375,
'value' => 20.07300000000000039790393202565610408782958984375,
'date' => '20173rd Nov',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
29 =>
array (
'year' => 2017,
'income' => 29.5,
'expenses' => 25.10000000000000142108547152020037174224853515625,
'value' => 30.0270000000000010231815394945442676544189453125,
'date' => '20173rd Dec',
'color' =>
array (
0 => '#FFFFFF',
1 => '#cccccc',
),
'strColor' => 'black',
),
);
//echo $_GET['callback']. '('. json_encode($chartDataRight) . ')';
echo $_GET['callback']. '('. json_encode($chartDataRight) . ')' . '('. json_encode($chartData) . ')';
?>
这是我的json outpout：
https://www.loly.com.au/ebp/jsonp.php?callback=?
然后在javascript中我做这样的事情：
$(function() {
$.getJSON('https://www.loly.com.au/ebp/jsonp.php?callback=?', function(chartDataRight, chartData) {
// assign ChartDataRight to chart1, assign ChartData to chart2
}
但是，我只能显示1个图表，具体取决于我首先传递的数据。
任何想法如何显示两个图表？
非常感谢！
答案 0 :(得分：1)
使用每个循环
更改php以返回数组：
echo $_GET['callback']. '(['. json_encode($chartDataRight).','. json_encode($chartData) . '])';
JS：
$(function() {
$.getJSON('https://www.loly.com.au/ebp/jsonp.php?callback=?', function(chartData) {
$.each(chartData,function(){
//initi each chart
})
}