5

Google Chart を使用して、リアルタイムで更新される棒グラフを作成したいと考えています。ユーザーがページを読み込んだときに、現在の結果を表示したいと考えています。しかし、データベースのデータが変更されるとすぐに、これらの変更をクライアントにプッシュしてグラフを更新したいと考えています。

Google Charts ページの棒グラフの例を次に示します。

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Year');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addRows([
      ['2004', 1000, 400],
      ['2005', 1170, 460],
      ['2006', 660, 1120],
      ['2007', 1030, 540]
    ]);

    var options = {
      title: 'Company Performance',
      vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

Ajax-Request を使用して数秒ごとにデータを取得し、グラフを再描画できると思います。しかし、私が見逃している Google Charts の inbuild-Method があるかもしれません。Cometについてもよく読みましたが、その概念を実装したことはありません。

他の誰かがその問題に遭遇しましたか?

4

1 に答える 1

2

タイマーに AJAX を実装するのが最も簡単な解決策です。

// using jQuery for simplicity, but you can implement in other libraries or vanilla javascript if you want
function drawChart() {
    var options = {
        title: 'Company Performance',
        vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.BarChart(document.getElementById('chart_div'));

    function updateChart () {
        $.ajax({
            url: 'path/to/data/source/',
            data: {/* any parameters you need to pass to the server to get your data back */},
            dataType: /* text, json, XML, whatever your server returns */,
            success: function (response) {
                // use response to create/update DataTable
                chart.draw(data, options);
                // update the chart again in 2 seconds
                setTimeout(updateChart, 2000);
            },
            error: function (response) {
                // handle errors
            }
        });
    }
    updateChart();
}

Comet サービスの使用は、javascript とサーバーでSocket.Ioのようなものを設定する必要があるため、実装が少し複雑です。

Comet サービスを使用すると、チャート内の最新のデータが常に保証されますが、AJAX は実装が簡単です。Comet では、AJAX が複数の独立したリクエストを作成している間、サーバーへのアクティブな接続を維持する必要があります。

于 2013-07-26T15:17:22.377 に答える