Vue-cli（webpack）環境にChart.js（vue-chartjs）をインストールしてグラフを実装する方法

　着実にユーザーを増やし、今ではangular、Reactを凌ぐ存在になったと言っても過言ではないvus.jsですが。今回は簡単にグラフチャートを実装できるプラグイン「Chart.js」のvue用にラッピングされた「vue-chartjs」をvue-cli（webpack）環境にインストールして実装してみたいと思います。

環境

　環境は下記の通り。

　なお、Webpackのインストール、構築方法は下記記事で紹介しています。

vue-chartjsのインストール

　インストールは、プロジェクトディレクトリ配下で下記コマンドを実行することでインストールできます。

npm install vue-chartjs chart.js --save

　インストールが完了したら、「node_modules」ディレクトリに以下2つのディレクトリが出来ていると思うので、念の為確認しておきましょう。

node_modules
├── vue-chartjs
├── chart.js

利用したいグラフチャートのjsを作成する

　問題なくインストールが完了したら、利用したいグラフチャートのjsファイルを作成する。

　今回は、Lineチャートを利用してみたいと思います。

　まずは、Componentディレクトリに「LineChart.js」というファイルを作成して、下記のように記述します。

import { Line } from 'vue-chartjs'

export default {
  extends: Line,
  mounted () {
    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
          label: 'Data One',
          backgroundColor: '#f87979',
          data: [40, 39, 10, 40, 39, 80, 40]
        }
      ]
    },
    { responsive: true, maintainAspectRatio: false }
    )
  }
}

　インストールしたvue-chartjsをインポートしてextendしています。そして、mounted内でrenderChartメソッドを実行して、その中に諸々の値を設定しています。それぞれの設定値に関してはこちらのページを参照すると分かるかと思います。

コンポーネントを作成

　つづて、グラフチャートを実際に利用するコンポーネントファイルを作成します。

　今回は適当に「LineSample.vue」というコンポーネントファイルを作成し、下記のように記述します。

　見ての通りですが、先ほど作成した「LineChart.js」を読み込み、コンポーネント化して表示したい位置にLineChartタグを挿入するだけです。

　これだけで下記のようなグラフチャートを実装することができます。

まとめ

　ということで、今回はvue-cli（webpack）環境にvue-chartjsをインストールして実際に実装する方法を紹介しました。

　今回紹介したように、とても簡単にグラフチャートを使えるのでデータ処理系のサイト等では有効的に使えるのではないでしょうか。

　てことで、今回はここまで！また！