Chart.jsで動くグラフの描写をしてみる

動くアニメーションがついたグラフを作成するとき使ったChart.jsがかなりよかったので共有します！

http://www.chartjs.org/Chart.js | HTML5 Charts for your website.

フロント側を触る機会が多い方は、すでに知っている方もいると思いますが、なにか数値を比較したり可視化したりするには非常におすすめです。

デザインも今時のフラットデザインになっているので、これでサービスを開発すると一気に見映えがよくなる気がします。

グラフは折れ線グラフ、棒グラフ、円グラフ、レーダーチャートの6種類のグラフがあります。

HTML5のCanvasを使って描画されているそうです。

使い方などはこちらに詳しく書いてあります。

Canvasで超可愛いグラフが作れる!「Chart.js」の紹介 | 株式会社LIG

またIE7から対応しており、古いIEでは動かない！といったことがなくなるのは、すごく嬉しいですね。

また導入するのも非常に簡単で、基本的には数値を変えることによってすぐに使うことができます。

またオプションも多くあり、各々目的にあった使い方ができそうです。

こちらがChart.jsの公式ドキュメントになっています。

http://www.chartjs.org/docs/Chart.js Documentation

重ねて使用するという使い方も使えそうです。

chart.jsで複数のグラフを重ねる方法 - Tech Design

うまく使うことができれば、このようなグローバルリッチリストのような動作を実装することも可能です。

自分がどのくらい裕福かがわかるGlobal Rich List - 理系大学生のwebメモ

Chart.jsだけではなくいろいろ組み合わせて使うともっとおもしろそうだと思いました。