WebixとD3.jsを使ってレスポンシブなグラフを作成する

最終更新日

Webix Advent Calendar 2014 16日目の記事です。

今回はWebixにD3.jsを組み込んでグラフを表示します。

webixAndD3js141216

example

コンポーネントとして表示したグラフはウインドウや境界線を移動した際に、自動的にコンポーネントのサイズにグラフがリサイズされます。

カスタムコンポーネント

WebixのコンポーネントとしてD3を利用できるカスタムコンポーネントを作成します。カスタムコンポーネントの作り方についてはまた別途説明するので、今回は下記コードを保存しWebixライブラリとともに外部ファイルとして読み込んでください。

サンプル

今回はD3ライブラリをwebixコンポーネントとは別に読み込みます。
(コンポーネント側で読み込むことも可能です)

■ 折れ線グラフを表示する

■ 円グラフを表示する

■ レイアウト