使用 Google Chart API 和 JSON for DataTable 创建折线图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17327022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create line chart using Google Chart API and JSON for DataTable
提问by Boardy
javaI am trying to create a line chart using the Google Chart API. I am trying to set the data using JSON for the datatable via a AJAX post.
java我正在尝试使用 Google Chart API 创建折线图。我正在尝试通过 AJAX 帖子使用 JSON 为数据表设置数据。
I have a version working for the pie chart but I can't find out how to do it for the line chart.
我有一个适用于饼图的版本，但我不知道如何为折线图执行此操作。
Below is how I am creating the chart with the ajax post.
下面是我如何使用 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"
);
}
Below is the code for the loadGraph.php
下面是 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);
}
}
Although no errors occur, the line chart is sort of displayed, but there is no line, as if the data is 0. Below is a screenshot of how the chart is being displayed
虽然没有出现错误，折线图有点显示，但没有线，好像数据是0。下面是图表显示方式的屏幕截图
Below is the output of the JSON content.
下面是 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}]}]}
Thanks for any help you can provide.
感谢您的任何帮助，您可以提供。
UPDATEI have tried to do what @davidkonrad suggested but I am now getting a different problem. I have changed the definition of row to rows for the PHP array as follows:
更新我已尝试按照@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);
But now when the graph loads I get Cannot read property '0' of undefinedwhere the graph should be displayed.
但是现在当图表加载时，我得到Cannot read property '0' of undefined了图表应该显示的位置。
Below is how the JSON is now being generated
以下是现在生成 JSON 的方式
{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":"20-01-13"},{"v":35},{"c":"21-01-13"},{"v":30}]}
I can't see how to change the array to make it match with the JSON that davidkonrad provided
我看不到如何更改数组以使其与 davidkonrad 提供的 JSON 匹配
回答by davidkonrad
The problem is a very small typo. In the JSON, rowshould be rows.
问题是一个很小的错字。在 JSON 中，row应该是rows.
Eg, changing the example JSON to
例如，将示例 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}]} ]};
and your code works :
并且您的代码有效：
Update
更新
Look at Format of the Constructor's JavaScript Literal data ParameterYou need to wrap each "c"-section into brackets and also misses "v" (value indicator) for the first column.
查看构造函数的 JavaScript 文字数据参数的格式您需要将每个“c”-section 括在括号中，并且还缺少第一列的“v”（值指示符）。
Your updated test JSON is
您更新的测试 JSON 是
"cols": [
{"type":"string"},{"type":"number"}
],
"rows":[
{"c":"20-01-13"},{"v":35},
{"c":"21-01-13"},{"v":30}
]
}
giving a "can't read 0 of undefined", becuase it should be
给出“无法读取未定义的 0”，因为它应该是
{
"cols":[
{"type":"string"},{"type":"number"}
],
"rows":[
{"c": [{ "v": "20-01-13"},{"v":35} ]},
{"c": [{ "v": "21-01-13"},{"v":30} ]}
]
}
graph :
图：
Hope it helps!
希望能帮助到你！
Absolutely final update
绝对最终更新
Modified PHP that along with json_encodeoutputs data in the correct google chart format :
修改后的 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);
}
outputs
产出
{"cols":[{"type":"string"},{"type":"number"}],"rows":[{"c":[{"v":"20-01-13"},{"v":35}]},{"c":[{"v":"21-01-13"},{"v":30}]}]}
which leads to the graph above
这导致了上面的图表
