Quick Start

基本概念，Vue-chart.js 是一個根據 chart.js 的延伸套件，因此當我們要在 Vue 使用 Vue-chart.js 的時候需要將兩個套件一起放進來

npm i vue-chartjs chart.js

並且當我們要使用 Vue-chart 時通常會有四件事要做

1. 從 vue-chart.js 引用需要的圖表
2. 在 chart.js 引用需要的內容，並且註冊進去本體
3. 建立圖表設定
4. 建立圖表資料

我們來以官方的 BarChart 來舉例吧，先上前兩步驟

<template>
  <Bar :data="data" :options="options" />
</template>

<script lang="ts">
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
import { Bar } from 'vue-chartjs'
import * as chartConfig from './chartConfig.js'

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

export default {
  name: 'App',
  components: {
    Bar
  },
  data() {
    return chartConfig
  }
}
</script>

這邊的核心為第 18 行的 ChartJS.register() 的部分，由於 vue-chart.js 只是提供一個框讓我們透過 Vue 來將資料灌注進去，因此一些 chart.js 的基本架構還是得透過 javascript 來註冊，之後讓我們來看看 data 的部分吧

// ./chartConfig.js
export const data = {
  labels: [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ],
  datasets: [
    {
      label: 'Data One',
      backgroundColor: '#f87979',
      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
    }
  ]
}

export const options = {
  responsive: true,
  maintainAspectRatio: false
}

我們可以看到 data 內擁有兩個值 labels 與 datasets 其中 labels 就是我們常看到的 X 軸標籤，那在 datasets 內會填寫圖表“內”的設定

與之不同，options 比較像是針對整個圖表的設定，像是標題、刻度、Ｘ軸或Ｙ軸的樣式等等

若您是一位已經開發 chart.js 多年的使用者，那想必對於 vue-chart.js 會是您的首選，不過若對於這些圖表工具比較陌生，那相信明天要介紹的 apexchart.js 會讓你多一個思考學習的選項，今天到此結束，讓我們明天見