3

Webブラウザで棒グラフを作成できる例やツールを見つけようとしています。サーバーからWebソケットを介してデータを送信します。データを受信すると、受信したデータを反映して、各バーの「高さ」を変更する必要があります。

したがって、ユーザーは、データが受信されるにつれてグラフが変化するのを見ることができます。

いくつかの例を見てきましたが、上記を実行する例は見当たりません。D3のようなものは本当に良さそうに見えますが、学習曲線が急であるように見え、かなり混乱しているようです。

シンプルで手っ取り早いものを探しています。

ありがとう

4

4 に答える 4

6

あなたが本当にする必要があるのは、何らかの形の再描画またはデータモデルをバインドしてそのモデルへの変更を検出する方法をサポートする単純なチャートライブラリを見つけることです。一般的な手順は次のとおりです。

  1. データの初期セットを使用してグラフオブジェクトを作成します
  2. 初期チャートを描く
  3. WebSocket接続を介して更新を取得する
  4. データセットを更新する
  5. チャートを再描画する

一般的なプロセスは非常に単純であるため、ライブラリは複雑になる傾向があります。

いくつかの例

投票と更新をリアルタイムで表示するだけのリアルタイムチャートの例は、HTML5WebSocketを使用したリアルタイム調査のコードに関する.netマガジンチュートリアルで見つけることができます。私が働いているプッシャーを使用しています。

DJ、Python、Pusher、TwitterストリーミングAPIを使用した例もここにあります：http： //bieber.nixonmcinnes.co.uk/

コードはここにあります： https ：//github.com/nixmc/pusher-d3-demo

ここのブログ投稿： http ：//www.nixonmcinnes.co.uk/2012/04/20/what-c​​an-we-learn-from-the-real-time-web-and-justin-bieber/

最も簡単な例

ここにSmoothieChartsでPusherを使用するビデオもあります： http ：//www.youtube.com/watch？v = VLTsT30TZYw

于 2012-11-27T12:00:14.850 に答える
3

「ライブ」チャートのクライアント側の描画については、d3.jsを参照することをお勧めします。それは本当にうまく機能し、ライブバー（または他のタイプ）チャートのようなことをすることはJQueryに似た構文で本当に簡単です。WebSocketを介してデータを取得することに関しては、さまざまなWebSocketパッケージ（完全な開示-私はKaazingで働いており、WebSocketの先駆者です）はほとんどすべてこれを行うことができます。

于 2012-11-30T01:24:19.533 に答える
1

XSockets.NETをご覧ください。WebSocket/Realtimeサービスのセットアップに使用できるNuget-Packageがあり、JavaScriptAPIを簡単に開始できます。また、JavaScriptを「のみ」実行するホストバージョンを使用することもできます。XSockets.NETの詳細については、http ：//xsockets.netを参照してください。

「javascript」バージョンのhttp://live.xsockets.netでホストされているサービス、 http： //xfiddle.net/にあるJavaScript開発者のための遊び場

グラフに関しては、jsfiddleに例があり、ユーザー入力にリアルタイムで反応するWijmoチャート（棒）が含まれています。xfiddle.netにその例へのリンクがあります

于 2012-11-27T06:59:08.797 に答える
1

この古い質問への新しい訪問者にとって、以下は現在、リアルタイムでプロットを変更するためのWebSocketの使用の最も単純で最も簡単な例の1つです（pythonまたはperlのいずれかと組み合わせたgoogleチャートを使用して実装されます）：

https://github.com/albertobeta/UberSimpleWebsockets

于 2015-05-31T08:52:44.457 に答える