D3で時系列折れ線グラフを作成し、下のグラフの小さいバージョンを使用して、ユーザーが Google Financeグラフ のようにチャートの特定のセクションを拡大できるようにします。
私が見つけた最も近い例は、このスイムレーンチャートです。
D3の折れ線グラフでこれを行う例はありますか?
NB: この例 のような純粋にドラッグ/ズーム可能なx軸ではなく、サイズ変更可能なブラシが上部にあるグラフの小さなバージョンが間違いなく欲しいです。
理想的には、 Rickshaw を使用したいのですが、Rickshawの例 レンジスライダーのみがあるようです です。そのため、人力車の例の方がさらに良いでしょう。
dygraphsは、このデモで必要なことをexactly行います:
HighStock 、HighChartsのあまり知られていない兄弟はどうですか?
D3の使用を意図していることは承知していますが、 Humble Finance は、javascriptとキャンバスだけで必要なことを正確に行うため、言及する価値があります。
D3を本当に使用するつもりなら、謙虚な資金がどれほど適切で適切であるかを考えると、時間を無駄にしなければならない独自のものを作成する必要があると思います。
Humble Financeを試すためのヒント:Zipダウンロードには必要なflotr2が含まれていませんが、 here から簡単にダウンロードできます(明らかに、必要なflotr2ファイルをHumble Financeディレクトリに追加する必要があります適切な場所)。
編集:
謙虚な金融を無視して、私はそれをたくさん使ってみました、そして、それは曲がりくねりを運転しました。コードベースは非常に面倒であるように見え、ページを機能させるために多くのライブラリに追加する必要がありました。その場合、チャートを少しでも変更することは非常に困難です。今はD3を使用していますが、SVGのレンダリングが非常に遅く、曲線上にたくさんの(たくさんの)ポイントがあります。最終的に、D3を使用して軸を描画し、スケールを設定し、タイムフレームを変更するものをレンダリングし、キャンバスを使用して曲線を描画しました。それはかなりうまくいくようです。申し訳ありませんが、表示可能な例はありません。
クロスフィルター を見ましたか? D3に基づく別の製品で、Google Financeのインターフェースと同様の特性があります。
人力車は現在これをサポートしています!
例 およびRickshaw.Graph.RangeSlider.Preview
。
私はあなたが言及したフレームワークのいずれにも精通していませんが、代わりに google charts を使用するオプションかどうか疑問に思いましたか?これを使用すると、Google Financeで何をするかがわかり、その方法の例はWebサイトから取得できます。
調査する他のフレームワークを探している場合は、Emprise Chartsをお勧めします。同様のことができると確信しており、開発チームは非常に役立ちます。