我正在为Google地区图表生成DataTable。我生成的表格是以下JSON。 JSON验证并且看起来正确,但是当输入到图表时,图表显示“表没有列”错误。
JSON似乎也与this page
上的示例文件中的JSON相匹配这是我的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}]}
]
}
以下是我如何获取数据并将其提供给图表:
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);
}
另外,我知道我可以使用日期对象而不是字符串作为日期,在解决初始问题之前,我宁愿不要过度复杂化。
答案 0 :(得分:1)
您的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});
此外,JSON中的数字将作为字符串输入,这将导致图表出现问题。您需要将它们输入为数字,例如。 {"v":"0"}
应为{"v":0}
。如果您使用PHP的json_encode
函数来构建JSON,则可以将JSON_NUMERIC_CHECK
作为第二个参数传递给函数调用,以确保您的数字输入正确:
json_encode($myData, JSON_NUMERIC_CHECK);