鮮やかなグラフを簡単に描画！JavaScript「Chart.js」を使った動的なグラフ・チャートの作り方

2017年1月26日

ニュース

グラフを使うと、あらゆる要素が客観的に比較できるので、問題分析が容易になったり、根拠を示しやすくなります。最近では情報やデータを可視化したインフォグラフィックを見かける場面が多いですが、それもグラフのメリットを活かしたものです。

しかし、グラフをホームページに掲載する時に、いちいち画像を作成するのは面倒……だと感じたことありませんか。

そこで今回は、グラフやチャートを JavaScript で動的に生成することができるChat.jsを紹介します。

Chart.jsを使えば、数行のコードを書くだけで、鮮やかなグラフを簡単に描画することができます。少しのステップで実装することができるので、実際に特徴や手順から確認してみましょう。
　　

Chart.jsとは？

http://www.chartjs.org

Chart.jsは、数行のコードで折れ線グラフや棒グラフ、円グラフやレーダーチャートなどをダイナミックに表示することができる JavaScript ライブラリです。

同じようにグラフを作成できる JavaScript ライブラリとしてはD3.jsが有名です。
D3.jsは複雑なグラフやチャートを描画できる反面、グラフの描画処理を自身で実装しなければならないので、 JavaScript 初心者から中級者にとっては「難しい」と感じてしまうようです。

Chart.jsはD3.jsのような複雑なデータビジュアリゼーションを表示することはできませんが、グラフやチャートの作成に特化しているので、初心者にも簡単に扱えるという点がメリットだと言えます。
　　

Chart.jsの特徴

Chart.jsには簡単に扱えるシンプルさはもちろんのこと、次のような特徴があります。
　　

1. 豊富なチャートタイプ

様々な種類のチャート描画に対応しています。

・ 折れ線グラフ
・ 棒グラフ
・ レーダーチャート
・ 極性面グラフ (鶏頭図)
・ 円グラフ・ドーナツ型チャート
・ バブルチャート

2. レスポンシブ対応

ウィンドウがリサイズされると、Chart.jsはグラフやチャートを再描画して、ウィンドウサイズに合わせてくれます。
　　

3. 混合チャート

棒グラフと折れ線グラフなど、複数のグラフを見やすく表示することができます。
　　

4. トランジション・アニメーション対応

データや色を変更したり、新たなデータセットを追加したら、アニメーション効果でふわりと変化していきます。
　　

Chart.jsの基本的な使い方

Chart.jsの使い方は極めてシンプルです。
HTML 側で描画する範囲をカンバス(canvas)として作成し、 JavaScript 側でグラフデータ(lineChartData)とグラフ全体にオプション(option)を設定するだけです。

ドーナツ型チャートを例にしてグラフ作成の手順を確認していきましょう。
　　

1. HTML Canvasを用意

まずは、 HTML 側でライブラリを読み込み、カンバス(canvas)を用意します。

<!--Chart.jsの読み込み -->
<script src="chart.js"></script>

<!--描画領域 -->
<canvas id="mycanvas" height="450" width="800"></canvas>

2. JavaScript でデータを用意

次に、 JavaScript 側でデータを用意します。まずはサンプルコードをご覧ください。

var data = [
　　{
　　　　value: 300,
　　　　color:"#F7464A",
　　　　highlight: "#FF5A5E",
　　　　label: "Red"
　　},
　　{
　　　　value: 50,
　　　　color: "#46BFBD",
　　　　highlight: "#5AD3D1",
　　　　label: "Green"
　　},
　　{
　　　　value: 100,
　　　　color: "#FDB45C",
　　　　highlight: "#FFC870",
　　　　label: "Yellow"
　　}
];

各要素の解説は、次のとおりです。

value ： ドーナツ型チャートの割合となる数値を指定します。

color ： チャートの色を指定します。

highlight ： マウスカーソルを合わせた時に変化するホバーの色を指定します。

label ： 凡例となるラベルを指定します。

3. JavaScript でオプションの設定

次に、 JavaScript 側でグラフの表示オプションを設定します。

「getElementById」の部分にcanvasのidを指定します。

var myChart = new Chart(document.getElementById("mycanvas").getContext("2d")).Doughnut(data);

完成

これらを適切に指定することで、次のようなドーナツ型チャートを作ることができました。

See the Pen ygVZBK by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

棒グラフやレーダーチャートなども、同じ要領で作成することができます。
ぜひ試してみてください。
　　

公式ドキュメントはこちら

Chart.jsではドキュメントが用意されており、ドキュメントに書かれている細かい設定を施すことで、さらに複雑なグラフを作成することができます。

公式ドキュメント：http://www.chartjs.org/docs/
　　

まとめ

今回は、Chart.jsを使ったグラフ・チャートの作り方を解説していきました。
エクセルを使ってグラフを作成して図として保存するのも一つの方法ですが、Chart.jsを使えば非常に軽量で動的なグラフを簡単に作成することができます。

JavaScript さえ扱うことができれば、スクロールしたらグラフが登場する、といった複雑な動作も実装することができます。
オプションの指定で自由にカスタマイズできるので、幅広いデザインに柔軟に対応してくれそうです。
　　