javascript - 更新谷歌折线图

Question

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

Answer 1

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