Vue.jsでChart.jsを使う方法

Vue.jsでChart.jsを使う方法

今回はvue-cliで作成したVue.jsを使って作成したアプリケーションにChart.jsを導入する方法を解説します。
ここではvue-chartjsを使って導入します。

GitHub - apertureless/vue-chartjs: 📊 Vue.js wrapper for Chart.js

元となる環境が整っていることを前提としていますのでご注意下さい。
まだ環境がない方は以下のページを参考に環境構築をお願いします。

【webpack版】Vue.jsの開発環境を整える【推奨】

目次

Chart.jsの導入
グローバルコンポーネント
ローカルコンポーネント

Chart.jsの導入

ここではnpmを使って導入します。以下の作業はターミナルで実施して下さい。

プロジェクトに移動

$ cd プロジェクトのパス

vue-chartjsをインストール

$ npm install vue-chartjs chart.js --save

これで導入完了です。
npmを使わない場合は、CDNを利用しましょう。
以下の2文をindex.htmlなどに追加します。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>

次にコンポーネントを作成していきましょう。
コンポーネントはグローバルコンポーネントとローカルコンポーネントで作成する2つの方法があります。

グローバルコンポーネント

まずはグローバルコンポーネントとして作成する方法です。
ここでは円グラフを描画するためのPieChartコンポーネントを作成します。

PieChart.vue

src/components/chartの直下に作りました。

<script>
import { Pie } from 'vue-chartjs'
export default {
  name: 'PieChart',
  extends: Pie,
  props: ['data', 'options'],
  mounted: function(){
      this.renderChart(this.data, this.options)
  },
  watch : {
  	  data : function(val) {
  	  	  this.renderChart(this.data, this.options)
  	  },
  	  options : function(val) {
  	  	  this.renderChart(this.data, this.options)
  	  }
  }
}
</script>

解説

最初に、vue-chartjsの中の円グラフ(Pie)をインポートします。

import { Pie } from 'vue-chartjs'

続いて、円グラフの使用宣言としてextendsを使います。

extends: Pie

ここでは描画データとオプションはpropsで用意しています。

props: ['data', 'options']

グラフの描画にはrenderChartを使います。

this.renderChart(this.data, this.options)

この描画メソッドはmountedと、「data」と「options」の変化が検知された時に呼ぶようにします。

mounted: function(){
    this.renderChart(this.data, this.options)
},
watch : {
	data : function(val) {
	  	this.renderChart(this.data, this.options)
	},
	options : function(val) {
	  	this.renderChart(this.data, this.options)
	}
}

これで完成です。このコンポーネントを使ってみましょう。
サンプルとしてTestコンポーネント内で使います。

Test.vue

<template>
  <div>
    <h3>円グラフを描画する</h3>
    <PieChart :data="pieChartData" :options="options"></PieChart>
  </div>
</template>

<script>
import PieChart from '@/components/chart/PieChart.vue'

export default {
  name: 'Test',
  components: {
    PieChart
  },
  data: function () {
      // グラフ描画用データ
      pieChartData : {
          // ラベル
          labels: ["天領", "薩摩", "長州", "土佐"],
          // データ詳細
          datasets: [{
              label: '藩と人口',
              data: [13740000, 9072000, 7150000, 6148000],
              backgroundColor: [
                 'rgba(255, 100, 130, 0.2)',
                 'rgba(100, 130, 255, 0.2)',
                 'rgba(130, 255, 100, 0.2)',
                 'rgba(230, 210, 85, 0.2)'
              ]
          }]
      },
      // グラフオプション
      options : {
          title: {
              display: true,
              text: '藩と人口'
          },
      }
  }
} 
</script>

解説

PieChartコンポーネントをインポートします。

import PieChart from '@/components/chart/PieChart.vue'

PieChartコンポーネントの使用宣言です。

components: {
    PieChart
},

データとオプションを用意します。

data: function () {
  // グラフ描画用データ
  pieChartData : {
      // ラベル
      labels: ["天領", "薩摩", "長州", "土佐"],
      // データ詳細
      datasets: [{
          label: '藩と人口',
          data: [13740000, 9072000, 7150000, 6148000],
          backgroundColor: [
             'rgba(255, 100, 130, 0.2)',
             'rgba(100, 130, 255, 0.2)',
             'rgba(130, 255, 100, 0.2)',
             'rgba(230, 210, 85, 0.2)'
          ]
      }]
  },
  // グラフオプション
  options : {
      title: {
          display: true,
          text: '藩と人口'
      },
  }
}

テンプレートにPieChartコンポーネントを追加します。

<PieChart :data="pieChartData" :options="options"></PieChart>

これで円グラフが完成となります。
線グラフであればLine、棒グラフであればBarを使います。

ローカルコンポーネント

続いてローカルコンポーネントとして作成してみましょう。今度は棒グラフで作成します。
こちらもサンプルとして、Testコンポーネント内で使うとします。

Test.vue

<template>
  <div>
    <h3>棒グラフを描画する</h3>
    <BarChart/>
  </div>
</template>

<script>
// インポート
import { Bar } from 'vue-chartjs'

// ローカルコンポーネント 棒グラフ
var BarChart = { 
  extends: Bar,
  mounted () {
      this.renderChart({
          // ラベル
          labels: ["天領", "薩摩", "長州", "土佐"],
          // データ詳細
          datasets: [{
              // データタイトル
              label: '藩と人口',
              // データ
              data: [13740000, 9072000, 7150000, 6148000]
          }]
    });
  }
}

export default {
  name: 'Test',
  components: {
    BarChart
  }
} 
</script>

解説

vue-chartjsの棒グラフ(Bar)をインポートします。

import { Bar } from 'vue-chartjs'

ローカルコンポーネントを作成します。

var BarChart = { 
  extends: Bar,
  mounted () {
      this.renderChart({
          // ラベル
          labels: ["天領", "薩摩", "長州", "土佐"],
          // データ詳細
          datasets: [{
              // データタイトル
              label: '藩と人口',
              // データ
              data: [13740000, 9072000, 7150000, 6148000]
          }]
    });
  }
}

コンポーネントの使用宣言です。

components: {
    BarChart
}

テンプレートに追加します。

<BarChart/>

もしくは

<BarChart></BarChart>

これでローカルコンポーネントの完成です。
グローバルコンポーネントとするか、ローカルコンポーネントとするかは用途次第だと思います。
再利用を考えるのであればグローバルコンポーネントですね。

以上で終わりです。