ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Chart.jsはHTML5/Canvasを使ったグラフライブラリです。

Web上で管理画面を提供する場合必要になるのがレポートです。そこにはただの数値の羅列だけでなく、グラフがあるとインパクトが違うでしょう。そこで使ってみたいライブラリとしてChart.jsを紹介します。


折れ線(曲線)グラフです。


棒グラフ。


レーダーチャート。


円のエリアグラフ。


円グラフ。


ドーナッツチャート。

Chart.jsはHTML5/Canvasで表示されているのが特徴です。なおサポートブラウザとしてはIE7から対応しています。対応しているグラフは折れ線、棒、レーダー、円のエリア、円、ドーナッツの6種類になります。表示の際にはアニメーションが実行されますが、その後はマウスクリックなどには反応しないようです。

Chart.jsはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。


MOONGIFTはこう見る

グラフは様々な種類があります。さらに必要な機能もそれぞれ異なります(二軸欲しい、中央に0を持ってきたいなど)。全てを網羅的に対応しているグラフライブラリを探すのは難しいですが、それでも自分たちの表示したいグラフに対応しているものを選ぶのは大事です。

表計算ソフトウェアがグラフ描画を得意としているため、Webアプリケーションにおいてもそのレベルを求められるのが辛いところですが、少なくともトレンドがきちんと分かること、比較がしやすく正しい結論が導きだせるグラフを描画できていれば十分と言えます。

Chart.js | HTML5 Charts for your website.

nnnick/Chart.js · GitHub

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch