vue-chartjsでグラフを描く

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	散布図

パラメータいくつか

labelString

グラフの目盛りの名称を表示します。デフォルトでは表示されません。

stepSize

グラフの目盛り間隔は指定されていないと自動でよろしくやってくれます。便利。

lineTension

折れ線グラフにおける、線の曲線具合を設定するパラメータです。
0で直線、所謂折れ線グラフになります。数字を増やしていくに従って、より曲がりくねったベジェ曲線でグラフが描かれます。

lineTension = 0

lineTension = 0.4

lineTension = 0.8

まとめ

使いやすいです。
だいたいのことはChart.jsの公式ドキュメントを読めば、出来ること出来ないことがわかると思います。
以上、快適なインフォグラフィック生活を〜

参考URL

https://vue-chartjs.org/ja/
https://www.chartjs.org/docs/latest/
https://www.webprofessional.jp/creating-beautiful-charts-vue-chart-js/