vue-chartjsでグラフを描く

Posted at 2019-07-12

Vue.jsで使えるグラフ描画ライブラリはいくつかありますが、有名なのはどれもChart.jsのラッパーライブラリとなっています。
今回はその中でも多機能なvue-chartjsを使ってみることにしました。

インストール

インストールはvue-chartjsの他にChart.jsも必要です。

yarn add vue-chartjs chart.js

vue-chartjsの公式ドキュメントには、Vue.jsで使うための必要最低限の情報しかないため、
グラフについて詳しく知りたい場合はChart.jsの公式ドキュメントを調べましょう。

グラフ描画

グラフ描画は簡単です。データを定義、もしくはAPIで取得するなどしてrenderChart()するだけ。

Chart.vue

<script>
import { Bar } from 'vue-chartjs';

export default {
  extends: Bar,
  name: 'chart',
  data () {
    return {
      data: {
        labels: ['January', 'February', 'March', 'April', 'May', 'June'],
        datasets: [
          {
            label: 'Bar Dataset',
            data: [10, 20, 30, 40, 50, 30],
            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
          },
          {
            label: 'Line Dataset',
            data: [10, 50, 20, 30, 30, 40],
            borderColor: '#CFD8DC',
            fill: false,
            type: 'line',
            lineTension: 0.3,
          }
        ]
      },
      options: {
        scales: {
          xAxes: [{
            scaleLabel: {
              display: true,
              labelString: 'Month'
            }
          }],
          yAxes: [{
            ticks: {
              beginAtZero: true,
              stepSize: 10,
            }
          }]
        }
      }
    }
  },
  mounted () {
    this.renderChart(this.data, this.options)
  }
}
</script>

Index.vue

<template>
  <div>
    <h1>棒グラフと線グラフ</h1>
    <chart></chart>
  </div>
</template>

<script>
import Chart from './Chart';

export default {
  components: {
    Chart,
  },
}
</script>

注意点

公式ドキュメントにも書かれていますが、renderChart()に渡されるoptionsはリアクティブでないことです。

描画できるグラフの種類

コンポーネント名	グラフ名
Line	折れ線グラフ
Bar or HorizontalBar	棒グラフ
Radar	レーダーチャート
Pie or Doughnut	円グラフ
PolarArea	鶏頭図
Bubble	バブルチャート
Scatter	散布図