0

Google Charts JS を使用して Web サイトでチャートを生成していますが、別の機能からデータを更新できないという問題に遭遇しました。

コード例は次のとおりです。

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)

ご覧のとおり、test2 関数には 5 秒ごとに新しいデータがあり、関数 test で Google Chart に入力する必要があります。テスト関数全体を test2 関数に入れたくない理由は、5 秒ごとにチャートの新しいインスタンスを開始し、メモリが増加し続けるため、メモリをいくらか消費するためです。

グラフに新しい行を追加するだけの方法があればいいのですが、Google のドキュメントによると、行を追加する唯一の方法は、グラフを毎回再描画することです。

4

3 に答える 3

0

そのメソッドにはグローバル変数が必要なため、スコープの問題が発生します。すべてを 1 つの関数にラップすることで、グローバルに関する問題を回避できます。

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

setTimeout5 秒後に呼び出されますtest2が、5 秒ごとではありません。5 秒ごとに繰り返したい場合setTimeout(test2, 5000);は、関数の最後で呼び出すか、代わりにtest2使用できますsetInterval(test2, 5000);。

于 2013-09-13T22:16:16.997 に答える