Chart.jsを使いグラフを表示してみる

      2016/03/09

screenshot-www.chartjs.org-2016-02-06-11-01-20

Webサイトにグラフを簡単に表示出来る、便利なJSライブラリーChart.jsを紹介!!
私がリリースしている下記のアプリ[ローン返済ナビゲーションcannavi]でも、残高の進捗を表現するのにChart.jsを使用しています。

The app was not found in the store. 🙁 #wpappbox

Links: → Visit Store → Search Google

ちなみに今回使用しているバージョンは以下の通りです。

Chart.js: v1.0.2

Chart.jsの使い方

まずはChart.jsのサイトへ行き、一式ダウンロードしてきましょう。
使用するのはChart.jsファイルのみです。
もしくはCDNへも公開されてますので、リンクを張っても良いかと。

使い方はとっても簡単です。
まずはHTMLの表示したい箇所に、canvasタグを用意します。idや幅高さは任意で。

JavaScriptでは下記のグラフの種類とデータ、オプションを指定します。

グラフの種類(6種類)

  • Doughnut:ドーナッツグラフ
  • Bar:縦棒グラフ
  • Line:折れ線グラフ or 面グラフ
  • Radar:レーダーチャート
  • PolarArea:変わった円グラフ(名称が分かりません。。)
  • Pie:円グラフ

グラフのデータ(ドーナッツグラフの場合)

  • value:個々の値
  • color:塗りつぶす色
  • highlight:マウスオーバー時の色
  • label:項目名

グラフのオプション

沢山ある為割愛しますが、アニメーションのイージングや点の大きさなど色々と指定出来ます。

実際のソースが以下になります。(ドーナッツグラフの場合)

ちなみに今回のデモは、下記の様にしてオプションを指定して可変(レスポンシブ対応)にしております。
なんと!このオプションを指定すれば、canvas自体の大きさも自動で変更してくれます。便利☆

それでは下の画像をクリックしてDEMOを見てみてください。

 
chart01

いかがでしょうか。こんなに簡単にアニメーションの付いたグラフが表示できました。

その他のグラフも紹介します。

Bar:縦棒グラフ

 
chart02

Line:折れ線グラフ

オプションの指定によって、曲線を直線にしたり、面を塗らない様にしたりできます。

 
chart03

Radar:レーダーチャート

 
chart04

PolarArea:変わった円グラフ

 
chart05

Pie:円グラフ

 
chart06

まとめ

各グラフのデータやオプションの指定は様々なので、公式サイト(英語)を見てください。
ちなみにこのデモの様にブログ上に表示させる方法は、[WordPress:特定の記事の中でThree.jsを使う方法]を応用しています。
次回はもっと掘り下げて、MonacaのベースでもあるAngular JSと組み合わせ動的にグラフを変更してみたいと思います。

 - Chart.js, JavaScript Tips