vue3で生のchart.jsを使いグラフを表示する

10163 ワード
chart.js Vue3 Vue.js Vue.js テキストリンク

vue-chartjsのvue3対応について

悲しいことにvue-chartjsは今のところvue3に対応していないようです。(2021年6月時点)
今は時間がたりないとのことです。
https://github.com/apertureless/vue-chartjs/issues/637
https://github.com/apertureless/vue-chartjs/issues/661

前提

Chart.jsのドキュメントのトップぺージにあるサンプルをネタにして動かしていきますー。

バージョン

chart.js: 3.3.2
vue: 3.0.0

インストール

yarn add chart.js

コード

Chart.vue
<template>
    <canvas id="chart"></canvas>
</template>

<script>

//記事末尾で補足
import Chart from 'chart.js/auto';

export default {
  methods: {
    renderChart() {
      let ctx = document.getElementById("chart");
      new Chart(ctx, {
        type: 'line',
        data:{
          labels: ["赤", "青", "黄色", "緑", "紫", "橙"],
          datasets: [{
            label: '得票数',
            data: [12, 19, 3, 5, 2, 3],
            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
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero:true
              }
            }]
          }
        }
      });
    }
  },
  mounted() {
    this.renderChart();
  }
};
</script>

こんな感じでuserしてあげれます。

Sample.vue
<template>
  <div>
    <h2>chart sample</h2>
    <Chart></Chart>
  </div>
</template>

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

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

こんな感じの画像になります。

補足

chart.js3では、使用するモジュールを登録する必要があるというように、ドキュメントに記載がありました。

Chart.js 3 is tree-shakeable, so it is necessary to import and register the controllers, elements, scales and plugins you are going to use.

以下のように単にchart.jsだけだとインポートするとコンソールエラーが出てしまいます。
なので登録してあげましょう。

import { Chart } from 'chart.js';

Uncaught (in promise) Error: "linear" is not a registered scale.
Uncaught TypeError: Cannot read property 'left' of undefined

したがって登録をしてあげます。一個一個必要なものだけを登録方法もいいようですが、ドキュメントに記載してある短い登録フォーマットを使うと動きます。

import { Chart, registerables } from 'chart.js';
Chart.register(...registerables);

また上記を１行で実行できる別のパスを用意してくれてると書いてあります。それが楽なので、今回はそちらの書き方を選びました。

vue.js
import Chart from 'chart.js/auto';