web-dev-qa-db-ja.com

D3またはRickshawのズーム可能なGoogleファイナンススタイルの時系列グラフ?

D3で時系列折れ線グラフを作成し、下のグラフの小さいバージョンを使用して、ユーザーが Google Financeグラフ のようにチャートの特定のセクションを拡大できるようにします。

私が見つけた最も近い例は、このスイムレーンチャートです。

http://bl.ocks.org/196217

D3の折れ線グラフでこれを行う例はありますか?

NB: この例 のような純粋にドラッグ/ズーム可能なx軸ではなく、サイズ変更可能なブラシが上部にあるグラフの小さなバージョンが間違いなく欲しいです。

理想的には、 Rickshaw を使用したいのですが、Rickshawの例 レンジスライダーのみがあるようです です。そのため、人力車の例の方がさらに良いでしょう。

30
Richard

NVD3は非常にクールなプロジェクトで、多数の再利用可能なチャートが記述されていますD3に。ビューFinder付きの折れ線グラフとソースコードの例については、 here を参照してください。

NVD3.js Line Chart with View Finder

更新:NVD3の例は、同様の機能を実証するMike Bostock(D3の作成者)の example にもリンクするようになりました。選択したデータにズーム/フォーカスする機能。D3.jsのみで実装されています。

D3.js Focus+Context via Brushing

33
GordyD

dygraphsは、このデモで必要なことをexactly行います:

http://dygraphs.com/gallery/#g/range-selector

enter image description here

14
Dan Dascalescu

HighStock 、HighChartsのあまり知られていない兄弟はどうですか?

enter image description here

6
dardenfall

D3の使用を意図していることは承知していますが、 Humble Finance は、javascriptとキャンバスだけで必要なことを正確に行うため、言及する価値があります。

D3を本当に使用するつもりなら、謙虚な資金がどれほど適切で適切であるかを考えると、時間を無駄にしなければならない独自のものを作成する必要があると思います。

Humble Financeを試すためのヒント:Zipダウンロードには必要なflotr2が含まれていませんが、 here から簡単にダウンロードできます(明らかに、必要なflotr2ファイルをHumble Financeディレクトリに追加する必要があります適切な場所)。

編集:

謙虚な金融を無視して、私はそれをたくさん使ってみました、そして、それは曲がりくねりを運転しました。コードベースは非常に面倒であるように見え、ページを機能させるために多くのライブラリに追加する必要がありました。その場合、チャートを少しでも変更することは非常に困難です。今はD3を使用していますが、SVGのレンダリングが非常に遅く、曲線上にたくさんの(たくさんの)ポイントがあります。最終的に、D3を使用して軸を描画し、スケールを設定し、タイムフレームを変更するものをレンダリングし、キャンバスを使用して曲線を描画しました。それはかなりうまくいくようです。申し訳ありませんが、表示可能な例はありません。

4
SColvin

クロスフィルター を見ましたか? D3に基づく別の製品で、Google Financeのインターフェースと同様の特性があります。

3
rowanu

人力車は現在これをサポートしています!

およびRickshaw.Graph.RangeSlider.Preview

0
Brian Low

私はあなたが言及したフレームワークのいずれにも精通していませんが、代わりに google charts を使用するオプションかどうか疑問に思いましたか?これを使用すると、Google Financeで何をするかがわかり、その方法の例はWebサイトから取得できます。

調査する他のフレームワークを探している場合は、Emprise Chartsをお勧めします。同様のことができると確信しており、開発チームは非常に役立ちます。

0
James