Google Chart API - 使用JS动态添加数据

时间:2011-06-29 09:13:09

标签: javascript api google-visualization

早上,我在页面中隐藏了数据,但我不知道如何将其添加到addRows函数中。

这就是我所拥有的:

    google.load("visualization", "1", {packages:["corechart"]});
$(document).ready(function(){
    var rowArray = [];
    $('input[name=device_name]').each(function(i){
        var name = $(this).val();
        var amount = $(this).next().val();
        rowArray.push(["'" + name + "'", amount]);
    });
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Device');
        data.addColumn('number', 'Amount');
        data.addRows( rowArray );
        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {
            width: 600, 
            height: 340, 
            title: 'Handheld Device Usage',
            hAxis: {
                title: 'Mobile Device Name', 
                titleTextStyle: {
                    color: '#404040'
                }
            }
        });
    }
});

任何人都可以看到我出错的地方吗?

此致

菲尔

2 个答案:

答案 0 :(得分:2)

也许这会奏效:

$('input[name=device_name]').each(function(i){
        var name = $(this).val();
        var amount = ($(this).next().val() * 1);
        rowArray.push([name, amount]);
});

答案 1 :(得分:1)

问题是数量是一个字符串...我已经看到你正在使用一个js框架,所以你可能会让console.log(rowArray);进行调试。

如果你改变这个,那么纠正这种情况的好方法是:

var amount = $(this).next().val().toInt();

我测试了它http://jsfiddle.net/TfsFT/1/及其工作原理。虽然我不得不改变一些因为我使用的是Mootools ..而且我没有html代码:P

祝你好运!