Chart.jsでさくっと簡単にグラフを作ってみる

f:id:Satoh_D:20161125172812p:plain

現在の案件で「JSでグラフを表示する」要件が出てきたので、調査がてらChart.js」を試してみました。
ドキュメントを見ながら写経し、実際にブラウザで確認するところまでメモしておきます。

Chart.js

前提

node.js: v6.9.1
npm: 3.10.9
Chart.js: 2.4.0
Browserify: 13.1.1

各種モジュールをインストールする

Chart.jsのインストールは npm もしくは bower を使って行います。
面倒な場合はCDNも用意されています。

Chart.js - cdnjs.com

npm init
npm install chart.js --save
npm install browserify --save

Browserifyの設定を行う

package.json内にある"scripts": {}にBrowserifyでビルド用コマンドを定義しておく
タスク名は任意の文言でおｋ
npm run build-jsをターミナル上で打つと、src/main.js がブラウザ上で利用できる形に変換されるようになります。

...
"scripts": {
  "build-js": "browserify src/main.js > build/js/bundle.js"
},
...

HTMLファイルを用意する

Chart.jsを利用する為にHTMLファイルを用意します。
index.html を作成し、下記のようにコードを記載します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Chart.js Sample</title>
</head>
<body>

<canvas id="myChart" width="400" height="400"></canvas>
  
<script src="build/js/bundle.js"></script>
</body>
</html>

JavaScriptファイルを作成する

main.jsに下記のコードを記載してみます。

'use strict';

var Chart = require('chart.js');

// canvas要素を取得
var ctx = document.getElementById('myChart');

// jQueryを使う場合は
// var $ = requires('jquery');
// var ctx = $('#myChart');
// でもおｋ
// ※ npm install jquery --save しておくこと

// グラフのオプションを記載
var myChart = new Chart(ctx, {
  // グラフの形式を指定
  // 今回は棒グラフ形式
  type: "bar",
  // グラフのデータを指定
  data: {
    // X軸の見出し設定
    labels: ['月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日', '日曜日'],
    // 各種グラフ設定
    datasets: [{
      // グラフの見出し設定
      label: '時間外労働時間',
      // Y軸のデータ設定
      data: [18, 11, 5, 16, 10, 9.5, 10],
      // グラフの背景色設定
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      // グラフのボーダー設定
      borderColor: [
        'rgba(255,99,132,1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      // ボーダーの太さ設定
      borderWidth: 1
    }]
  },
  // グラフ自体の共通項目設置絵
  options: {
    // レスポンシブ形式を無効にする
    responsive: false
  }
});

Browserifyでビルドしてみる

下記コマンドをターミナル上で実行します。
src/main.js 内のコードがブラウザ上で利用できる形式に変換され build/js/bundle.js に設置される

npm run build-js

ブラウザ上で確認してみる

実際にブラウザで確認してみるとグラフが出来ています。
とある月の時間外労働時間が棒グラフになりました。
水曜日が優秀なことが伺えますね...！

今回は棒グラフで試してみましたが、type: "bar"の部分を下記のように変えると、様々なグラフを作成することが出来ます。

"bar": 棒グラフ
"line": 折れ線グラフ
"radar": レーダーチャート
"polarArea": 鶏頭図
"pie": パイチャート
"doughnut": ドーナツチャート
"bubble": バブルチャート

さいごに

さくっと簡単に見た目おしゃれなグラフが作れるChart.js凄い...！
ver2.0からは混合グラフまで作成できるようになっているので、とても使いやすいのではないでしょうか。
これからJSでグラフを作る場合はChart.jsを使っておけば間違いないような気がします

参考サイト

Chart.js | Documentation

@Satoh_D no blog

大分にUターンしたので記念に。調べたこととか作ったこととか食べたこととか