Zenn
🗒️

【Nuxt.js v2】Chart.jsでグラフを描画する(導入編)

2021/04/10に公開
Nuxt
Nuxt
Chart.js
tech

前提条件

・バージョン
vue-chartjs@3.5.1
chart.js@2.9.3

インストール

vue-chartjsとchart.jsのインストールが必要

npm install vue-chartjs chart.js@2.9.3

使い方

チャート用のコンポーネントを作成し、ページに配置するだけです。

components/SampleBarChart.vue

<script>
import { Bar } from 'vue-chartjs'

export default {
  extends: Bar,
  data () {
    return {
      chartData: {
        labels: ['2021年4月', '2021年5月', '2021年6月'],
        datasets: [
          {
            label: '売上',
            data: [10, 30, 20]
          }
        ]
      },
      options: {}
    }
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

/pages/〇〇.vue

<template>
  <div>
    <SampleBarChart />
  </div>
</template>

以下のように表示されます。
※デフォルトの設定では目盛りの最大・最小値がデータによって自動調整されます。

補足

上記ではサンプルとして棒グラフを描画しましたが、他にも折れ線グラフLineや円グラフPieなど、いろんな種類のグラフを描画可能です。
また、options: {}で細かな設定が可能で、大抵のことは調整可能です。

Chart.js公式サイト
https://www.chartjs.org/docs/latest/

Discussion