Question

我正在使用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 Chart。我不想将整个测试函数放入test2函数的原因是因为它会每隔5秒启动一个新的图表实例，这有点像内存占用，因为内存不断增加。

如果有一种方法可以在图表中添加新行，那将会很棒，但根据Google的文档，添加行的唯一方法是每次重绘图表。

Answer 1

应该是：

setTimeout(test2, 5000)

setTimeout的第一个参数是一个函数。你是调用函数并将其结果（undefined，因为test2()没有返回任何内容）传递给setTimeout。

Answer 2

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);
}

Answer 3

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

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将在5秒后调用test2，但不是每5秒调用一次。如果您想每5秒钟重复一次，则可以在setTimeout(test2, 5000);功能的末尾拨打test2，也可以改为使用setInterval(test2, 5000);。

将数据从一个功能更新到另一个功能

3 个答案: