javascript - 更新Google折线图

我正在使用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
        });
    }
}

最佳答案

您的主要问题是您没有将事件的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});