Chart.js

Chart.js は グラフを描画してくれる JavaScript のライブラリです。
他ライブラリへの依存なし。

レスポンシブに対応していますが、Canvas で描画するため、ラスター形式（ビットマップ形式）で描画されます。

SVG で描画してくれる他ライブラリに依存しないグラフライブラリに Chartist.js などがあります。

Chart.js は MIT License のもと利用可能です。

• Chart.js サイト
  • http://www.chartjs.org/
• GitHub リポジトリ
  • https://github.com/chartjs/Chart.js
• ドキュメント
  • http://www.chartjs.org/docs/latest/

インストール

Chart.js をインストールするにはいくつかの方法があります。

パッケージマネージャ

npm

npm install chart.js --save

Bower

bower install chart.js --save

パッケージマネージャを使用して Chart.js をインストールします。

CDN

CDN から Chart.js のファイルを読み込むと、ダウンロードの必要はありません。

GitHub からダウンロード

https://github.com/chartjs/Chart.js/releases の Downloads の項目からファイルをダウンロードします。

• Chart.js
• Chart.min.js

これらには Chart.js のみ含まれています。
時間軸を使用する必要がある場合は、Chart.js の前に Moment.js を含める必要があります。

• Chart.bundle.js
• Chart.bundle.min.js

これらには Moment.js が含まれています。アプリケーションに既に Moment.js が含まれている場合は、使用しないでください。

使い方

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

Chart.js のファイルを読み込みます。

<canvas id="myChart"></canvas>

描画に必要な Canvas を配置し、id を指定します。

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // 作成するグラフの種類
    type: 'line',

    // ラベルとデータセットを設定
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
        }]
    },

    // オプション設定
    options: {}
});

• 作成するグラフの種類
• データセット
• ラベル
• オプション

これらを指定し、グラフを描画します。

基本的なグラフの作成方法は、以上です。

レスポンシブ対応

Chart.js のオプションに responsive がありますが、これはデフォルト値が true になっています。

この値が true の場合、コンテナに応じて canvas のサイズを変更します。
（コンテナとは canvas の親要素のことです。）

グラフを固定にする　

<canvas id="chart" width="400" height="400"></canvas>

canvas には width と height を指定することができます。単位はピクセル（px）です。
しかし responsive が true の場合は、親要素のサイズに依存するので、期待通りにいきません。

options: { responsive: false }

canvas の width と height をピクセルで固定にしたい場合は responsive を false に設定します。

<div class="chart-container" style="position: relative; width: 400px;">
    <canvas id="chart"></canvas>
</div>

または responsive を true に設定したまま、コンテナに width を指定することで横幅を固定できました。

グラフを可変にする

responsive になにも指定しないか true に設定し、canvas の親要素のコンテナを配置します。

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

コンテナの単位は Viewport units という Viewport に対する相対的な数値を指定します。

chart.canvas.parentNode.style.height = '128px';

グラフは、コンテナのサイズを変更することによって、プログラムでサイズを変更することもできます。

カスタム描画

http://www.chartjs.org/docs/latest/developers/plugins.html のページを参考に、Chart.js のグラフに追加で描画していきます。
getDatasetMeta() を使用して、データセットのメタデータを取得します。

垂直線を強調表示で引く

var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
    // 作成するグラフの種類
    type: 'line',

    // ラベルとデータセットを設定
    data: {
        labels: ["January", "February", "March", "April", "May", "June", "July"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
            data: [0, 10, 5, 2, 20, 30, 45],
            fill: false,
        }]
    },
    plugins: [{
        afterDatasetsDraw: function (chart, ease) {
          // カスタム描画を追加でおこなうため、データセットのメタデータを取得
          var meta = chart.getDatasetMeta(0);
          var data = meta.data;
          // X座標
          var x = data[4]._model.x;
          // Y座標
          var y_top = data[4]._yScale.top;
          var y_bottom = data[4]._yScale.bottom;

          // 垂直線の描画
          var context = chart.chart.ctx;
          context.beginPath();
          context.lineWidth = 2;
          context.strokeStyle = '#008edd';
          context.moveTo(x, y_top);
          context.lineTo(x, y_bottom);
          context.stroke();
        }
    }],
    // オプション設定
    options: {}
});

plugins で設定した処理の中で垂直線を引きました。
実際のデータセットのデータ値を取得したい場合 chart.config.data.datasets[0] のように取得し、そのなかの data に配列で値が入っています。