java我正在尝试使用 Google Chart API 创建折线图。我正在尝试通过 AJAX 帖子使用 JSON 为数据表设置数据。
我有一个适用于饼图的版本,但我找不到如何适用于折线图。
下面是我如何使用 ajax 帖子创建图表。
function drawLineGraph()
{
$.post("loadGraph.php",
{
type: "line"
},
function (result)
{
var data = new google.visualization.DataTable(result);
var options = {
title: "Line Graph Test"
};
var chart = new google.visualization.LineChart(document.getElementById("lineChart"));
chart.draw(data, options);
}, "json"
);
}
下面是 loadGraph.php 的代码
print json_encode(test());
function test()
{
$array = array();
if ($_POST['type'] == "line")
{
$array['cols'][] = array('type' => 'string');
$array['cols'][] = array('type' => 'number');
$temp = array();
$array['row'][] = array('v' => (string) "20-01-13");
$array['row'][] = array('v' => (int) 35);
$array['row'][] = array('v' => (string) "21-01-13");
$array['row'][] = array('v' => (int) 30);
}
}
虽然没有报错,但是折线图有点显示,但是没有折线,好像数据为0。下面是图表显示的截图
以下是 JSON 内容的输出。
{"cols":[{"type":"string"},{"type":"number"}],"row":[{"c":[{"v":"20-01-13"},{"v":22}]},{"c":[{"v":"21-01-13"},{"v":24}]},{"c":[{"v":"22-01-13"},{"v":27}]}]}
感谢您提供的任何帮助。
更新 我已尝试按照@davidkonrad 的建议进行操作,但我现在遇到了一个不同的问题。我已将 PHP 数组的行定义更改为行,如下所示:
$array['cols'][] = array('type' => 'string');
$array['cols'][] = array('type' => 'number');
$array['rows'][] = array('c' => "20-01-13");
$array['rows'][] = array('v' => 35);
$array['rows'][] = array('c' => "21-01-13");
$array['rows'][] = array('v' => 30);
但是现在当图表加载时,我得到 Cannot read property '0' of undefined
应该显示图表的地方。
下面是 JSON 现在是如何生成的
{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":"20-01-13"},{"v":35},{"c":"21-01-13"},{"v":30}]}
我看不到如何更改数组以使其与 davidkonrad 提供的 JSON 匹配
最佳答案
问题是一个非常小的错字。在 JSON 中,row
应该是 rows
。
例如,将示例 JSON 更改为
var result = { "cols":[ {"type":"string"}, {"type":"number"}], "rows":[ {"c":[{"v":"20-01-13"}, {"v":22}]}, {"c":[{"v":"21-01-13"}, {"v":24}]}, {"c":[{"v":"22-01-13"}, {"v":27}]} ]};
并且您的代码有效:
更新
看Format of the Constructor's JavaScript Literal data Parameter 您需要将每个“c”部分括在方括号中,并且还缺少第一列的“v”(值指示符)。
您更新的测试 JSON 是
"cols": [
{"type":"string"},{"type":"number"}
],
"rows":[
{"c":"20-01-13"},{"v":35},
{"c":"21-01-13"},{"v":30}
]
}
给出“无法读取未定义的 0”,因为它应该是
{
"cols":[
{"type":"string"},{"type":"number"}
],
"rows":[
{"c": [{ "v": "20-01-13"},{"v":35} ]},
{"c": [{ "v": "21-01-13"},{"v":30} ]}
]
}
图表:
希望对您有所帮助!
绝对的最终更新
修改后的 PHP 与 json_encode
一起以正确的谷歌图表格式输出数据:
function test() {
$array = array();
$array['cols'][] = array('type' => 'string');
$array['cols'][] = array('type' => 'number');
//HERE you have the difference
$array['rows'][]['c'] = array(
array('v' => "20-01-13"),
array('v' => 35)
);
$array['rows'][]['c'] = array(
array('v' => "21-01-13"),
array('v' => 30)
);
return json_encode($array);
}
输出
{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":[{"v":"20-01-13"},{"v":35}]},{"c":[{"v":"21-01-13"},{"v":30}]}]}
这导致上图
关于javascript - 使用 Google Chart API 和 JSON 为 DataTable 创建折线图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17327022/