web-dev-qa-db-ja.com

html5を使用した折れ線グラフでのリアルタイムデータグラフ

数秒ごとに更新し、ページを更新する必要のない折れ線グラフを作成したい(サーバー上で更新する別のファイルから情報を取得する)、それらのJavaScriptライブラリ(JQuery以外)これで簡単になりますか?誰でもウェブページに意味のある例を表示できますか? 1から10までのスケールで、これはどれくらい難しいでしょうか?(10は難しい)

また、重要な場合、データは10秒の固定間隔で更新されます。そして可能であれば、CSS3 HTML5とjavascriptだけに固執したいと思います。

45
Mehran

使用できるチャートライブラリはいくつかあります。 gRaphaelHighcharts 、および他の人が言及したものです。これらのライブラリは非常に使いやすく、よく文書化されています(難易度で1としましょう)。

私の知る限り、これらのライブラリは「リアルタイム」ではありません。なぜなら、それらはその場で新しいポイントを追加する可能性を与えないからです。新しいポイントを追加するには、完全なチャートを再描画する必要があります。しかし、チャートの再描画は高速であるため、これは問題ではないと思います。私はgRaphaelをいくつか試しましたが、このアプローチに問題はありませんでした。更新レートが10秒であれば、問題なく動作するはずです(ただし、グラフの複雑さに依存する場合があります)。

完全なチャートの再描画が問題になる場合は、 Raphael または paper.js のようなベクターグラフィックスライブラリを使用して自分でチャートを作成する必要があります。これは、チャート作成ライブラリを使用するよりも少し難しくなりますが、実行可能でなければなりません。 (難易度で5としましょう)。

固定間隔でデータを取得しているため、通常のajax libを使用できます。 jQueryは大丈夫ですが、他にもいくつかの選択肢があります。固定されていない間隔ではこれは最良の選択ではないかもしれません。この場合、 socket.io のようなものを見なければならないかもしれませんが、サーバー側にも影響があります。

注1:Raphael、gRaphael、およびHighchartsは、純粋にHTML5ではなくSVG/VMLですが、これも許容可能な選択肢だと思います。

注2:Highchartは、新しいポイントを挿入するときにチャートを再描画する必要がないようです。 http://www.highcharts.com/documentation/how-to-use#live-charts を参照してください

26
luc

Smoothie Charts をお勧めします。

使い方は非常に簡単で、簡単かつ広範囲に設定でき、リアルタイムデータをストリーミングするのに最適です。

オプションを調べてコードを生成できるビルダー があります。

免責事項:私は図書館の寄稿者です。

34
Drew Noakes

私はこれがまさにあなたが探しているものだと信じています:

http://www.highcharts.com/demo/dynamic-update

オープンソース(商用Webサイトにはライセンスが必要ですが)、クロスデバイス/ブラウザー、高速。

5
Razor

あなたを助けるかもしれないいくつかのこと:

Canvas Expressは強力なチャートライブラリです。 http://canvasxpress.org/

ここでは、独自の方程式ベースのグラフのローリングに関するチュートリアルを見つけることができます: http://www.html5canvastutorials.com/labs/html5-canvas-graphing-an-equation/

キャンバスソリューションの使用は非常に簡単です。ajaxを使用してグラフの定期的なデータを取得し、新しいデータを取得するたびにグラフを再描画できます。
すべてクライアント側であるため、ページを更新する必要はありません。

Javascriptとajaxを回避する方法を知っていると、中程度の難易度になります。そうでない場合は、スタックOvreflowにいくつかの質問を投稿して、行き詰まる部分を支援する必要があるでしょう。

5
Variant

Flotr2 および Envision はオプションです。 Flotr2には、リンクしたdocoページにリアルタイムの例があります。 Envisionを始めるのは少し難しいので、Flotr2を試してください。

4
Fletch

このスレッドを完了するために、以下を調べることをお勧めします。

d3.js

これは、大量のJavaScript視覚化を支援するライブラリです。ただし、学習曲線は非常に急です。

nvd3.js

D3.jsの視覚化を簡単に作成できるライブラリ(もちろん制限付き)。

3

また、HTML5 Canvas要素の上に構築される CanvasJS Chart もご覧ください。非常に高速にレンダリングされ、メモリの問題を起こすことなく50〜100ミリ秒ごとに更新できます。

[完全な開示:私はチームの一員です]

2
Sunil Urs

最も簡単な方法は、 plotti.co -これのために作成したマイクロサービスを使用することです。どのようにデータを取得するかによって異なりますが、一般的な使用パターンでは、SVGイメージをhtmlに含めます。

<object data="http://plotti.co/FSktKOvATQ8H/plot.svg" type="image/svg+xml"/>

gETリクエストでデータをハッシュに送信します(または(new Image(1,1)).src=...同じまたは他のページのJavaScriptメソッド)

http://plotti.co/FSktKOvATQ8H?d=1,2,

ローカルに設定するのも簡単です

2
grandrew

ChartJS のリアルタイムチャートについて発見した要点は次のとおりです。
https://Gist.github.com/arisetyo/5985848

ChartJSは使いやすく、見た目も良いように見えます。

また、 FusionCharts があります。これはエンタープライズ向けのより洗練されたライブラリで、リアルタイムのデモがあります:
http://www.fusioncharts.com/explore/real-time-charts

[〜#〜] edit [〜#〜]また、リアルタイムグラフにRickshawを使い始めました。使いやすく、かなりカスタマイズ可能です。 http://code.shutterstock.com/rickshaw/

1
JustGoscha

このスレッドはおそらく非常に古いものです。しかし、このスレッドを見た人にこれらの結果を共有したい。比較ベットを実行しました。 Flotr2、ChartJS、非同期でハイチャート。 Flotr2が最も速いようです。これをテストするために、新しいデータポイントを50ミリ秒ごとに最大1000個のデータポイントごとに渡します。 Flotr2は、チャートを定期的に再描画しているように見えますが、私にとっては最速でした。

http://jsperf.com/async-charts-test/2

1
ssp

サーバーからデータを取得し、以前に利用可能なデータセットを更新してから、おそらく自由に利用可能なライブラリのいずれかを使用してグラフを描画します[例:http://www.rgraph.net/]

考慮したいこと:チャートが状態を表す場合、xhrで新しいデータのみを取得し、クライアントでデータを更新して描画します。

0
Anil Shanbhag

http://www.rgraph.net/ は、グラフとチャートに最適です。

0
pushNpop

また、Meteor Chartsを試してみるとよいでしょう。超高速(html5キャンバス)で、多くのチュートリアルがあり、よく文書化されています。ライブアップデートは非常にうまく機能します。モデルを更新し、chart.draw()を実行してシーングラフを再レンダリングするだけです。デモは次のとおりです。

http://meteorcharts.com/demo

0
Eric Rowell

2015年からの追加私の知る限り、ランタイム指向の折れ線グラフライブラリはまだありません。私は、どの動作が「N秒ごとに新しいポイントを要求する」、「古いデータを消去する」、「宣言的」な方法でセットアップできるかを表しています。

代わりに、グラファイトAPIがあります http://graphite-api.readthedocs.org/en/latest/ サーバー側、およびそれを使用するクライアント側プラグインの数。しかし実際には、データスクローラー、範囲グラフ、フェーズでのaxeXセグメンテーションなど、私たちが好む高度な機能がないため、かなり制限されています。

「リーチチャートを表示する」タスクと「リアルタイムチャート」を持つタスクには根本的な違いがあるようです。

0