javascript - 谷歌图表 "Table has no columns"

Question

我正在为谷歌面积图生成数据表。我生成的表是下面的 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);
}

此外，我知道我可以使用日期对象而不是日期字符串，在解决最初的问题之前，我不希望将其过于复杂化。

Answer 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);