javascript 谷歌图表“表格没有列”
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/20427536/
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
Google chart "Table has no columns"
提问by fishpen0
I am generating a DataTable for a google area chart. The table I generate is the below JSON. The JSON validates, and looks correct, but when fed to the chart, the chart displays a "table has no columns" error.
我正在为谷歌面积图生成一个数据表。我生成的表是下面的 JSON。JSON 经过验证,看起来是正确的,但是当提供给图表时,图表显示“表没有列”错误。
The JSON also appears to match the JSON in the sample file on this page
JSON 似乎也与此页面上的示例文件中的 JSON 匹配
Here is my JSON data:
这是我的 JSON 数据:
{
"cols":[
{"id":"","label":"date","type":"string"},
{"id":"","label":"run","type":"number"},
{"id":"","label":"passed","type":"number"}
],
"rows":[
{"c":[{"v":"2012-07-20"},{"v":0},{"v":0}]},
{"c":[{"v":"2012-07-23"},{"v":0},{"v":0}]}
]
}
Here is how I am fetching the data and giving it to the chart:
这是我获取数据并将其提供给图表的方式:
function loadData()
{
var request=new XMLHttpRequest();
request.onreadystatechange=function()
{
if (request.readyState==4 && request.status==200)
{
return request.responseText;
}
}
request.open("GET","testsrun.php?json=true&branch=test",true);
request.send();
}
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var json = loadData();
var data = new google.visualization.DataTable(json);
var options = {
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
Also, I am aware that I can use a date object instead of a string for the date, I would prefer not to overcomplicate this until I have solved the initial problem.
另外,我知道我可以使用日期对象而不是字符串作为日期,在解决最初的问题之前,我宁愿不要过度复杂化。
采纳答案by asgallant
Your loadData
function doesn't return anything, so the json
variable is null
. I would suggest a slight reorganization of your code to get the effect you want:
您的loadData
函数不返回任何内容,因此json
变量为null
. 我建议对您的代码稍作重组以获得您想要的效果:
function drawChart (json) {
var data = new google.visualization.DataTable(json);
var options = {
vAxis: {minValue: 0}
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
function loadData () {
var request=new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
drawChart(request.responseText);
}
}
request.open("GET","testsrun.php?json=true&branch=test",true);
request.send();
}
google.load('visualization', '1', {packages:['corechart'], callback: loadData});
Also, the numbers in your JSON are being input as strings, which will cause problems with your charts. You need to input them as numbers, eg. {"v":"0"}
should be {"v":0}
. If you are using PHP's json_encode
function to build your JSON, you can pass JSON_NUMERIC_CHECK
as a second argument to the function call to make sure your numbers are input correctly:
此外,您的 JSON 中的数字是作为字符串输入的,这会导致您的图表出现问题。您需要将它们输入为数字,例如。{"v":"0"}
应该是{"v":0}
。如果您使用 PHP 的json_encode
函数来构建您的 JSON,您可以将JSON_NUMERIC_CHECK
第二个参数作为第二个参数传递给函数调用,以确保您的数字输入正确:
json_encode($myData, JSON_NUMERIC_CHECK);