javascript - リアルタイムデータグラフ

Question

Web ベースのリアルタイムデータグラフを作成したいと考えており、次のようなさまざまなオプションを検討しています。

Html5 キャンバス
Extjs などのグラフをサポートする JS ライブラリ

リアルタイムとは、Web サーバーをポーリングするクライアントが毎秒言うか、リバース ajax を使用するかのいずれかです。サーバーは、利用可能な場合にデータをクライアントにプッシュします。

おすすめを教えてください。

score 16 · Accepted Answer

16

このユースケース向けに設計されたSmoothieChartsもあります。

于 2011-07-22T11:23:15.323 に答える

score 15 · Accepted Answer

jQueryに基づくオープンソースのプロットライブラリであるFlotの使用を検討することをお勧めします。

リアルタイムとは、グラフが自動的に更新されることを意味していると思います。以下は、1 秒間隔で AJAX ポーリングを使用してデータをフェッチしてプロットする場合、コードは次のようになります。

function fetchData() {
   $.ajax({
      url:      'json_fetch_new_data.php',
      method:   'GET',
      dataType: 'json',
      success:  function(series) {
         var data = [ series ];

         $.plot($('#placeholder'), data, options);
      }
   });

   setTimeout(fetchData, 1000);
}

次のデモをチェックして、動作を確認してください ([Poll for Data] ボタンをクリックします)。