Question

我目前正在使用以下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']});

我不太确定我哪里出错了。有人可以帮帮我吗？

Answer 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}]}]}'

您可以在Table的Google游乐场中尝试此操作。如果您想拥有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}]}]}'

使用Google Chart API的空白图表

1 个答案: