更新Google折线图

时间:2014-08-15 18:21:07

标签: javascript google-visualization

我正在使用Google折线图,我设置了将数据放入图表的事件。当我第一次使用这个事件时它工作得很好但是,当我第二次使用它时,新数据与之前的数据一起写,但我不想这样做。当我想到这个问题时,我想把数据保持在一起而不是写在一起我意识到我可以通过每次保存数据并将它们放入for循环来解决这个问题,但我认为这不是正确的方法有任何其他方法来解决这个问题

这是我的JS代码:

function drawChart() {
    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'example1'); // Implicit domain label col.
    data.addColumn('number', 'example2'); // Implicit series 1 data col.
    $("#Sample").click(function () {
        var test1 = $("#sample1").val();
        var test2 = $("#sample2").val();
        var test3 = $("#sample3").val();
        data.addRows([
            [test3, test1],
            [test3, test2]
        ]);
        chart.draw(data, {
            pointSize: 5
        });
    }
}

1 个答案:

答案 0 :(得分:2)

您的主要问题是,您没有将add.columns部分从事件中分离出来,并且每次调用事件时都会创建另一列并将数据写入。

您的解决方案:

function drawChart() {
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
var data = new google.visualization.DataTable();
data.addColumn('number', 'example1'); // Implicit domain label col.
data.addColumn('number', 'example2'); // Implicit series 1 data col.
$("#Sample").click(function () {
    var test1 = new Number($("#sample1").val()).valueOf();
    var test2 = new Number($("#sample2").val()).valueOf();
    var test3 = new Number($("#sample3").val()).valueOf();
    data.addRows([
    [test3, test1],
    [test3, test2]
    ]);
    chart.draw(data, {
    pointSize: 5
    });
});
}
google.load('visualization', '1', {packages: ['corechart'], callback: drawChart});