数秒ごとに更新され、ページを更新する必要のない折れ線グラフが目標になります (サーバー上で更新される別のファイルから情報を取得します)。これを簡単にする JavaScript ライブラリ (JQuery 以外) はありますか? 誰かがウェブページで例を示すことができますか?
データは一定間隔で更新されます。可能であれば、CSS HTML5 と JavaScript のみを使用することをお勧めします。
114308 次
14 に答える
35
于 2013-07-25T21:10:05.013 に答える
26
使用できるグラフ作成ライブラリがいくつかあります: gRaphael、Highcharts、および他の人が言及したもの。これらのライブラリは非常に使いやすく、十分に文書化されています (難易度 1 としましょう)。
私の知る限り、これらのライブラリは「リアルタイム」ではありません。その場で新しいポイントを追加する可能性がないからです。新しいポイントを追加するには、チャート全体を再描画する必要があります。でもチャートの再描画は速いので問題ないと思います。gRaphael でいくつか試してみましたが、このアプローチに問題はありませんでした。更新レートが 10 秒の場合、正常に動作するはずです (ただし、チャートの複雑さに依存する場合があります)。
グラフ全体の再描画が問題になる場合は、Raphaelやpaper.jsなどのベクター グラフィック ライブラリを使用して、自分でグラフを作成する必要がある場合があります。これは、チャート ライブラリを使用するよりも少し難しくなりますが、実現可能です。（難易度で5としましょう）。
一定間隔でデータを取得しているため、通常の ajax ライブラリを使用できます。jQueryは私にとっては問題ありませんが、他にもいくつかの選択肢があります。これは、間隔が固定されていない場合には最適な選択ではない可能性があります。この場合、socket.ioなどを確認する必要があるかもしれませんが、サーバー側にも影響があります。
注 1: Raphael、gRaphael、および Highcharts は純粋に HTML5 ではなく SVG/VML ですが、これも許容できる選択だと思います。
注 2: 新しいポイントを挿入するときに、Highchart はチャートを再描画する必要がないようです。http://www.highcharts.com/documentation/how-to-use#live-chartsを参照してください。
于 2011-06-28T08:00:29.297 に答える
6
これはまさにあなたが探しているものだと思います：
http://www.highcharts.com/demo/dynamic-update
オープン ソース (商用 Web サイトにはライセンスが必要ですが)、クロス デバイス/ブラウザー、高速。
于 2011-06-28T11:49:04.333 に答える
5
あなたを助けるかもしれないいくつかのこと：
Canvas Express は強力なグラフ作成ライブラリです: http://canvasxpress.org/
ここでは、独自の方程式ベースのグラフのローリングに関するチュートリアルを見つけることができます: http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/
キャンバス ソリューションの使用は非常に簡単です。ajax を使用してグラフの定期的なデータを取得し、新しいデータを取得するたびにグラフを再描画できます。
すべてクライアント側であるため、ページを更新する必要はありません。
javascript と ajax に精通している場合は、中程度の難易度になります。そうでない場合は、行き詰まった部分を解決するために、Stack Ovreflow にさらに質問を投稿する必要があります。
于 2011-06-28T07:11:18.733 に答える
2
You might also want to look at CanvasJS Chart which is built on top of HTML5 Canvas Element. It renders really fast and can be updated every 50-100 milliseconds without getting into memory issues.
[Full disclosure: I am part of the team]
于 2014-08-13T08:08:20.963 に答える
1
サーバーからデータを取得し、以前に利用可能だったデータセットを更新してから、おそらく無料で利用できるライブラリの 1 つを使用してグラフを描画します (例: http://www.rgraph.net )
考慮すべきこと: チャートが状態を表している場合は、xhr で新しいデータのみを取得し、クライアントでデータを更新して描画します。
于 2011-06-28T07:17:12.743 に答える
0
2015年からの追加私の知る限り、ランタイム指向の折れ線グラフライブラリはまだありません。「N秒ごとに新しいポイントを要求する」、「古いデータをパージする」という動作が「宣言的な」方法でセットアップできるチャートを意味します。
代わりに、サーバー側用のグラファイト API http://graphite-api.readthedocs.org/en/latest/ と、それを使用する多数のクライアント側プラグインがあります。しかし実際には、データ スクローラー、範囲チャート、フェーズでの axeX セグメンテーションなど、私たちが気に入っている高度な機能がなく、かなり制限されています。
「チャートに到達するように表示する」タスクと「リアルタイムチャートを表示する」タスクには根本的な違いがあるようです。
于 2015-10-27T09:07:39.890 に答える