谷歌图表“表没有列”

时间:2013-12-06 15:23:08

标签: javascript json google-visualization

我正在为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);
}

另外,我知道我可以使用日期对象而不是字符串作为日期,在解决初始问题之前,我宁愿不要过度复杂化。

1 个答案:

答案 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);