vue-chartjs：透過整合進 vue 的原件簡單在 vue 裡使用 chart.js 繪製圖表

vue-chartjs 是一個透過整合進 vue 的原件簡單在 vue 裡使用 chart.js 繪製圖表的套件，簡單說明使用方式。

首先安裝 vue-chartjs

pnpm add vue-chartjs chart.js
# or
yarn add vue-chartjs chart.js
# or
npm i vue-chartjs chart.js
 

要在 vue 裡使用要 import

import { Bar } from 'vue-chartjs'

建立範例 component  BarChart.vue 如下：

<template>
  <Bar
    id="my-chart-id"
    :options="chartOptions"
    :data="chartData"
  />
</template>

<script>
import { Bar } from 'vue-chartjs'
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

export default {
  name: 'BarChart',
  components: { Bar },
  data() {
    return {
      chartData: {
        labels: [ 'January', 'February', 'March' ],
        datasets: [ { data: [40, 20, 12] } ]
      },
      chartOptions: {
        responsive: true
      }
    }
  }
}
</script>

這樣在其他 vue 檔裡就可以像這樣使用了：

<template>
  <BarChart />
</template>

<script>
import BarChart from 'path/to/component/BarChart'

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