更新谷歌折线图

Updating Google line chart

本文关键字：折线图 谷歌 更新      更新时间：2023-09-26

我使用谷歌折线图，我设置事件将数据放在图表中。当我第一次使用这个事件时，它工作得很好，但是，当我第二次使用它时，新数据覆盖了以前的数据，但我不想那样。我想把数据保存在一起而不是过度写入当我想到这个问题时我意识到我可以通过每次保存数据并将它们放入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});

相关文章：