【Vue.js】Chart.jsでグラフを描画する方法｜売上・分析画面への導入例

Vue.jsアプリケーションでデータの可視化を行う際、Chart.jsは手軽に高品質なグラフを描画できるライブラリとして人気があります。Vue 3との連携には vue-chartjs を使うことで、よりスムーズに導入が可能です。この記事では、棒グラフや折れ線グラフなどの基本表示から、売上データの可視化といった実務的な例までを紹介します。

Chart.jsとvue-chartjsのインストール

npm install chart.js vue-chartjs

Vue 3に対応している vue-chartjs のバージョン 4.x 以降を利用してください。

基本的な棒グラフコンポーネント

以下は、Chart.jsとvue-chartjsを使ったシンプルな棒グラフ表示コンポーネントの例です。

// components/SalesBarChart.vue
<template>
  <Bar :data="chartData" :options="chartOptions" />
</template>

<script setup>
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)

const chartData = {
  labels: ['1月', '2月', '3月', '4月', '5月'],
  datasets: [
    {
      label: '売上（万円）',
      data: [30, 45, 60, 50, 70],
      backgroundColor: '#42a5f5'
    }
  ]
}

const chartOptions = {
  responsive: true,
  plugins: {
    legend: {
      position: 'top'
    },
    title: {
      display: true,
      text: '月別売上グラフ'
    }
  }
}
</script>

コンポーネントの使い方

作成したグラフコンポーネントは、親コンポーネントでインポートして使います。

<template>
  <div>
    <h2>売上分析</h2>
    <SalesBarChart />
  </div>
</template>

<script setup>
import SalesBarChart from './components/SalesBarChart.vue'
</script>

折れ線グラフ（LineChart）の表示

棒グラフ以外にも、折れ線グラフ・円グラフ・レーダーチャートなど様々な形式に対応しています。

// 折れ線グラフの例
<Line :data="chartData" :options="chartOptions" />

動的なデータの読み込みにも対応

APIなどから取得したデータでグラフを描画したい場合は、リアクティブなrefを使ってデータを後から反映することも可能です。

import { ref, onMounted } from 'vue'

const chartData = ref(null)

onMounted(async () => {
  const res = await fetch('/api/sales')
  const json = await res.json()
  chartData.value = {
    labels: json.labels,
    datasets: [...]
  }
})

まとめ

Chart.jsはVueアプリにおけるデータ可視化の手段として非常に有力です。vue-chartjsと組み合わせれば、売上分析画面やダッシュボードなどで簡単にグラフ表示を実現できます。レスポンシブ対応、アニメーション、ツールチップなどの機能も充実しているため、用途に応じたカスタマイズも柔軟に行えます。