JavaScript のグラフライブラリメモ

Android タブレットで表示できる JavaScript ベースのチャートライブラリを探したメモ。

探しているものは、棒グラフと折れ線グラフのコンボチャートを表示できて、できればデータを差分追加することできれいに差分更新されるもの。

描画検証に使ったのは Android 4.3 の Nexus 7 にインストールされている Chrome 29.0.1547.72。

Google Charts


他のライブラリと異なり、JS をダウンロードして組み込むのではなく、Google のサーバの JS を直接指定して利用する形式となる。なので、ライセンスは Google サービスの利用規約という形になる。ドキュメントが充実していて、開発は困らなさそう。

残念ながらタブレットでは表示できなかった。

ccchart


差分形式でデータを追加してチャートに反映させることが可能なライブラリ。追加の方法が Web Socket でレコードひとつずつを渡すというもので、サーバ側の対応が必要になるためちょっと使いづらいのが珠に瑕。

差分によるアニメーションも含め、タブレットでも表示可能。"type":"bar" と "type":"line" のコンボチャートも可能。

Raphaël


チャートライブラリというよりは SVG によるグラフィックライブラリという位置付け。その一部としてチャートもある。

SVG によるなめらかなアニメーションと SVG のイベントハンドリングが特徴で、これらは非常にきれいで便利ではあるものの、チャートのみにフォーカスすると機能が弱い。

タブレットでもきれいに描画されるが、タブレットには負担が大きい印象。

ドキュメントが非常に充実しており、グラフィックライブラリとして使用するのは良いかもしれない。

Chart.js


描画時の美しいアニメーションが特徴のシンプルなチャートライブラリ。

タブレットでも美しいアニメーションは健在。ドキュメントも充実。

だがしかし、おそらくコンボチャートはできない。

JavaScript InfoVis Toolkit


さまざまなチャートを描画可能なチャートライブラリ。初期データは loadJSON() で、更新時は updateJSON() でデータを渡すことで、初回表示時と更新時に美しくアニメーションする。

アニメーションの動作に慣性があり、その動きは今回取り上げたライブラリの中では一番美しいと感じる。

残念ながらコンボチャートはなさそう。

総括

今回の要求(タブレットで動作し、コンボチャートを表現でき、差分更新が可能)を満たしたのは ccchart のみ。ただ、他の美しいチャートを見てしまうと、ccchart にはアニメーション機能がないためがどうしても見劣りしてしまう。