Vue.jsでchart.jsを使用する

概要

Vue.jsでchart.jsを使用してグラフを描画する。
備忘録として記載します。

環境

• @vue/cli 4.5.15
• vue@2.6.14 (vuetify使用のため、2を使用する)
• chart.js@2.9.4
• vue-chartjs@3.5.1
• vuetify@2.6.3
• vuetify-loader@1.7.3

chart.jsについては、versionが3.0.0以上だと以下のエラーが出てしまうようです。
TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor

chart.js 関係のインストール

npm install vue-chartjs
npm install chart.js@2.9.4

ファイル構成

ファイル構成は以下になる。
vue createとvue add vuetifyで生成する。

src
├── App.vue
├── components
│   └── chart
│       ├── bar_chart_box.js
│       └── barChartCard.vue
├── main.js
├── plugins
│   └── vuetify.js
├── router
│   └── index.js
└── views
    └── Home.vue

今回は棒グラフを作成する
bar_chart_box.jsがベースで、各vueファイルで読み込み

bar_chart_box.js

import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  props: ["chartData", "options"],
  mounted() {
    this.renderChart(this.chartData, this.options)
  }
}

barChartCard.vue

<template>
  <v-card outlined elevation="2">
    <v-card-title>
      <v-icon>mdi-image</v-icon>
      履歴
    </v-card-title>
    <v-card-subtitle>ユーザー履歴</v-card-subtitle>
    <v-card-text>
      <Chart :chartData="chartItems" :options="chartOptions"/>
    </v-card-text>
  </v-card>
</template>
 
<script>
  import Chart from './bar_chart_box.js'

  export default {
    components: {
      Chart
    },
    data() {
      return {
        chartItems: {
          labels: ["ユーザー1", "ユーザー2", "ユーザー3", "ユーザー4", "ユーザー5"],
          datasets: [{
            label: "アクセス数",
            data: [12, 23, 4, 16, 28],
            backgroundColor: 'skyblue'
          }]
        },
        chartOptions: {
          maintainAspectRatio: false,
          scales: {
            // X-Axis
            xAxes: [{
              display: true,
              // グリッドの非表示
              gridLines: {
                display:false
              }
            }],
            // Y-Axis
            yAxes: [{
              display: true,
              position: 'left',
              ticks: {
                beginAtZero: true,
                maxTicksLimit: 10,
              },
            }]
          },
        }
      }
    }
  }
</script>

Home.vue

<template>
  <div>
    <v-row>
      <v-col>
        <barChartCard />
      </v-col>
    </v-row>
  </div>
</template>

<script>
  import barChartCard from "../components/chart/barChartCard.vue";

  export default {
    name: 'Home',
    components: {
      barChartCard
    }
  }
</script>

npm run serveで以下のように表示されました