使用 Google Chart API 的空白图表答案

【问题标题】：Blank chart using Google Chart API使用 Google Chart API 的空白图表
【发布时间】：2012-08-11 13:38:06
【问题描述】：

我目前正在使用以下 JSON 使用 Google Chart API 生成图表：

{
"cols":[
    {
        "id":"DateOfBirth",
        "label":"Date of Birth",
        "type":"string"
    },
    {
        "id":"Number",
        "label":"Number",
        "type":"number"
    },
    {
        "id":"Gender",
        "label":"Gender",
        "type":"string"
    }
],
"rows":[
    {
        "c":[
            {
            "v":"F"
            },
            {
            "v":"2012-08-07"
            },
            {
            "v":"1"
            }
        ]
    },
    {
        "c":[
            {
            "v":"M"
            },
            {
            "v":"1988-07-28"
            },
            {
            "v":"1"
            }
        ]
    },
    {
        "c":[
            {
            "v":"F"
            },
            {
            "v":"1990-05-05"
            },
            {
            "v":"1"
            }
        ]
    }
]
}

但是，图表没有显示（它只显示为带有标题的白色画布）。我无法弄清楚我的 JSON 有什么问题。我还包含了用于呈现图表的代码：

// where json is the string literal
function drawChart(json) {
    // Create the data table.
    var data = new google.visualization.DataTable(json);

    // Set chart options
    var options = {'title':'Students',
        'width':400,
        'height':300,
        'view': {'columns': [0,2]}};

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart($('#chart_div')[0]);
    chart.draw(data, options);
}

...我通过 AJAX 调用将所有内容拼凑在一起。

$(function() {
    $.ajax({
        type: "GET",
        url: localUrl,
        success: function(data)
        {
            drawChart(data);
        }
    });
});

google.load('visualization', '1.0', {'packages':['corechart']});

我不太确定我哪里出错了。谁能帮帮我？

【问题讨论】：

你能提供一个jsfiddle吗？
已经尽力了，jsfiddle.net/HUMyS/6，不幸的是'容器未定义'出现......这在本地开发中没有发生。

标签： json charts google-visualization

【解决方案1】：

“数字”列的值不应是字符串：

'{"cols":[{"id":"Gender","label":"Gender","type":"string"},{"id":"DateOfBirth","label":"Date of Birth","type":"string"},{"id":"Number","label":"Number","type":"number"}],"rows":[{"c":[{"v":"F"},{"v":"1988-08-10"},{"v":1}]},{"c":[{"v":"M"},{"v":"1988-07-28"},{"v":1}]},{"c":[{"v":"F"},{"v":"1988-08-10"},{"v":1}]}]}'

您可以在 Google Playground 中尝试使用 Table。如果你想有一个PieChart，3 列是行不通的；删除 'DateOfBirth' 列正在起作用：

'{"cols":[{"id":"Gender","label":"Gender","type":"string"},{"id":"Number","label":"Number","type":"number"}],"rows":[{"c":[{"v":"F"},{"v":1}]},{"c":[{"v":"M"},{"v":1}]},{"c":[{"v":"F"},{"v":1}]}]}'

【讨论】：

3 列不起作用是对的；我只使用 2 列就让它发挥作用。