0

我正在使用 Google Charts JS 在我的网站上生成图表，但遇到了无法从不同功能更新数据的问题。

这是示例代码：

google.setOnLoadCallback(test);

function test() {
    chart = new google.visualization.DataTable();
    chart.addColumn('string', 'Lorem');
    chart.addColumn('number', 'Ipsum');
    chart.addRows([
            ['', 0]
    ]);
        var chartOptions = {};
    var chartCreate = new google.visualization.LineChart(document.getElementById('chartDiv'));
          chartCreate.draw(chart, chartOptions);
    ]);
}

function test2() {
    chart.addRows([
        ['Uno', 123],
        ['Dos', 233],
        ['Tres', 12],
        ['Quatro', 231]
    ]);
    chartCreate.draw(chart, chartOptions);
}

setTimeout(test2(),5000)

如您所见，我将每 5 秒在 test2 函数中有新数据，我需要在函数测试中填充 Google 图表。我不想将整个测试函数放入 test2 函数的原因是因为它会每 5 秒启动一个图表的新实例，并且随着内存不断增加，这有点占用内存。

如果有一种方法可以将新行添加到图表中，那就太好了，但是根据 Google 的文档，添加行的唯一方法是每次都重新绘制图表。

4

3 回答 3

1

它应该是：

setTimeout(test2, 5000)

第一个参数setTimeout是一个函数。您正在调用该函数并将其结果（即undefined，因为test2()不返回任何内容）传递给setTimeout.

于 2013-09-13T21:44:57.083 回答
0

您会遇到范围问题，因为该方法需要全局变量。您可以通过将所有内容包装在一个函数中来避免全局变量的问题：

google.setOnLoadCallback(test);

function test() {
    var chart = new google.visualization.DataTable();
    chart.addColumn('string', 'Lorem');
    chart.addColumn('number', 'Ipsum');
    chart.addRows([
        ['', 0]
    ]);
    var chartOptions = {};
    var chartCreate = new google.visualization.LineChart(document.getElementById('chartDiv'));
    chartCreate.draw(chart, chartOptions);

    function test2() {
        chart.addRows([
            ['Uno', 123],
            ['Dos', 233],
            ['Tres', 12],
            ['Quatro', 231]
        ]);
        chartCreate.draw(chart, chartOptions);
    }

    setTimeout(test2, 5000);
}

setTimeout将test2在 5 秒后调用，但不是每 5 秒调用一次。如果你想每 5 秒重复一次，你可以setTimeout(test2, 5000);在函数结束时调用test2，也可以setInterval(test2, 5000);改用。

于 2013-09-13T22:16:16.997 回答
0

setTimeout 采用函数引用。在您的通话中，您使用 () 调用该函数。您只想传递函数的名称，以便 setTimeout 可以在稍后（从现在起 5 秒）调用它，如下所示：

setTimeout(test2, 5000)

INSIDE 功能测试。这将确保在加载初始调用之前未设置计时器。

此外，请确保在第一个函数中为图表变量提供“var”关键字，否则您将创建一个全局变量（除非这是有意的。）

google.setOnLoadCallback(test);

function test() {
    var chart = new google.visualization.DataTable();
    chart.addColumn('string', 'Lorem');
    chart.addColumn('number', 'Ipsum');
    chart.addRows([['', 0]]);
    var chartOptions = {};
    var chartCreate = new         

    google.visualization.LineChart(document.getElementById('chartDiv'));
    chartCreate.draw(chart, chartOptions);
    setTimeout(test2,5000)
}

function test2() {
    chart.addRows([
        ['Uno', 123],
        ['Dos', 233],
        ['Tres', 12],
        ['Quatro', 231]
    ]);
    chartCreate.draw(chart, chartOptions);
}
于 2013-09-13T21:52:36.993 回答