円や棒グラフをサポートしたCanvasによるグラフライブラリ「Chart.js」
Chart.jsはHTML5/Canvasを使ったグラフライブラリです。
Web上で管理画面を提供する場合必要になるのがレポートです。そこにはただの数値の羅列だけでなく、グラフがあるとインパクトが違うでしょう。そこで使ってみたいライブラリとしてChart.jsを紹介します。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-19 12.16.49.1363784047.png)
折れ線（曲線）グラフです。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-19 12.17.00.1363784050.png)
棒グラフ。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-19 12.17.04.1363784054.png)
レーダーチャート。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-19 12.17.12.1363784059.png)
円のエリアグラフ。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-19 12.17.19.1363784062.png)
円グラフ。
[](http://images.moongift.jp/2013/03/Screenshot 2013-03-19 12.17.24.1363784069.png)
ドーナッツチャート。
Chart.jsはHTML5/Canvasで表示されているのが特徴です。なおサポートブラウザとしてはIE7から対応しています。対応しているグラフは折れ線、棒、レーダー、円のエリア、円、ドーナッツの6種類になります。表示の際にはアニメーションが実行されますが、その後はマウスクリックなどには反応しないようです。
Chart.jsはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。
MOONGIFTはこう見る
グラフは様々な種類があります。さらに必要な機能もそれぞれ異なります（二軸欲しい、中央に0を持ってきたいなど）。全てを網羅的に対応しているグラフライブラリを探すのは難しいですが、それでも自分たちの表示したいグラフに対応しているものを選ぶのは大事です。
表計算ソフトウェアがグラフ描画を得意としているため、Webアプリケーションにおいてもそのレベルを求められるのが辛いところですが、少なくともトレンドがきちんと分かること、比較がしやすく正しい結論が導きだせるグラフを描画できていれば十分と言えます。