Vue3 + TS + Chart.js

Chart.jsとは

https://www.chartjs.org/docs/latest/

Chart.jsとは棒グラフ、折れ線グラフ、レーダーチャートなど、様々なグラフに関する描画を楽チンにしてくれるライブラリです。

今回は2023/03/11時点で最新のChart.js(4.2.1)と、Vue3、TypeScriptでレーダーチャートを実装したので、少しご紹介です。

install

まずコマンドを利用してChart.js、vue-chartjs、@types/chart.jsをインストールします。
これは3つで1セットなのでinstallしていきましょ！！

pnpm install Chart.js
pnpm install vue-chartjs
pnpm install @types/chart.js -D

これでpackage.jsonに追加されたことを確かめます。

コンポネント作成

続いては、vueでchartのコンポネントを作成していきます。
今回はradar-chartを作っていきます。
https://www.chartjs.org/docs/latest/charts/radar.html

他にも種類はたくさんあります。
https://github.com/chartjs/Chart.js/tree/master/docs/charts

components/chart.vue

<script setup lang="ts">
// @types/chart.jsの型付けを使用するためにimportしてます。
import type { ChartData, ChartOptions } from 'chart.js';

// それぞれの部品をインポートしていきます。
// まだ種類があると思いますが、とりあえず手当たり次第importしておきます。
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale,
  PointElement,
  RadialLinearScale,
  Filler,
  LineElement
} from 'chart.js'

// 今回はRadar-chartを作成するので、import。
// 他にも{ Bar }など、種類があります。
import { Radar } from 'vue-chartjs'

// ここでChartJSでこれらを使います〜と登録してあげます。
ChartJS.register(CategoryScale, LinearScale, BarElement,PointElement ,RadialLinearScale, LineElement, Filler, Title, Tooltip, Legend)

// ここではchartに使うdataを登録していきます。
// ChartData<'radar'>でRadar-Chartの型付けを使ってます。
// 他にも<"bar">などがあります。
const data:ChartData<'radar'> = {
  labels: [
    'Eating',
    'Drinking',
    'Sleeping',
    'Designing',
    'Coding',
    'Cycling',
    'Running'
  ],
  datasets: [
    {
      label: 'My First dataset',
      backgroundColor: 'rgba(179,181,198,0.2)',
      borderColor: 'rgba(179,181,198,1)',
      pointBackgroundColor: 'rgba(179,181,198,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(179,181,198,1)',
      data: [65, 59, 90, 81, 56, 55, 40]
    },
    {
      label: 'My Second dataset',
      backgroundColor: 'rgba(255,99,132,0.2)',
      borderColor: 'rgba(255,99,132,1)',
      pointBackgroundColor: 'rgba(255,99,132,1)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgba(255,99,132,1)',
      data: [28, 48, 40, 19, 96, 27, 100]
    }
  ]
};

// ここではchartに使うoptionsを登録していきます。
// ChartOptions<'radar'>でRadar-Chartの型付けを使ってます。
// 他にも<"bar">などがあります。
const options:ChartOptions<'radar'> = {
  responsive: true,
  maintainAspectRatio: false
};
</script>

<template>
  <!-- 定義したdataとoptionsを渡してあげます。 -->
  <Radar :data="data" :options="options"/>
</template>

view/home.vue

<script setup lang="ts">
import Chart from "../components/Chart.vue";
</script>

<template>
  <Chart />
</template>

上記コードを書いたら、写真のように描画されます。

Radar-Chart

最後に

今回はデータも静的で、とりあえず描画するといった方法をご紹介しました。
次はここに動的にデータを入れていく(APIを叩いて入れるなど)グラフを作っていけたらと思います。
また、それが出来次第、記事にしていこうかなと思います。