Plottable.jsを使ってD3上で動的グラフを素早く作成する

無料 D3.jsライブラリ あなたを可能にする多くのうちの1つにすぎません インタラクティブグラフィックを作成する ページ上。 D3はおそらく最も人気のあるものですが、それを使うことを学ぶのは簡単なことではありません。.

それが理由です Plottable.js そのような貴重な図書館です。無料のオープンソースプロジェクトです。 D3.jsの上に構築された, 誰でも簡単に作成できるようにする 対話型データグラフを一から作成.

この図書館 汚れた作業をすべて処理, そのため、データなどの詳細に集中することができます。プロット可能 適切なコードを生成します 選択したグラフのサイズと位置.

各チャート 独自のコンポーネントを持っています あなたができるPlottableで テンプレートコードをコピー/貼り付け 自分でグラフを再構築する。これを書いている時点では、次の中から選択できます。 10プロットグラフスタイル, 棒グラフ、円グラフ、散布図、面積図を含む.

あなたはできる コンポーネントを個別に再構築する そして 設定を動的にカスタマイズする. これにより、インタラクティブな要素、色、アニメーション、配置、サイズなど、必要なものを簡単に変更できます。.

の フルライブラリー ソースコードを閲覧してコピーをダウンロードしたい場合はGitHubで入手できます。.

しかし、学ぶための最善の方法は例を通してです。だからあなたは彼らを見てみるべきです Plottableを実行しているサンプルグラフ それがどのように動作しているかを見るために.

すべてのグラフは 完全にインタラクティブ, 起動するソースコード付き。同様のグラフを再構築したい場合は、JSコードをコピーして貼り付け、必要に応じて再フォーマットしてください。.

私は彼らのサイトから2つの個人的なお気に入りがあります。 カレンダーヒートマップ GitHubのアクティビティボードと 同期チャート 動的選択機能付き.

これまでにD3.jsを使ったことがないのであれば、このライブラリーを学ぶのに苦労するでしょう。特に、それが TypeScriptで書かれた, だからあなたもおそらくそれを拾うことになるでしょう。最後のコードは ES5 JavaScriptにコンパイル, だからそれはするべきです すべての主要ブラウザで動作します.

あなたが飛び込んでも構わないと思っているならば、それらを見てください。 チュートリアルページ 便利なリソースがいっぱいです。 Plottableを使い始めるために必要なすべてを学びます。 動的なWebベースのグラフを作成する ゼロから.