このホームページはまもなく旧サイトとなります。新しいホームページへ移動する

Vue composition APIでchart.jsを使いグラフを作成(vue-chart.jsは使わない)

開発者ブログ

Vue-chart.jsを使わずにグラフを作ってみる

Vueでグラフを作るには、Vue-chart.jsを使うのが結構簡単ですが、できるだけ依存度を減らしたいので、直接chart.jsを使ってVue.jsでグラフを作成できるようにしてみました。やってみると意外と簡単でした。

主な環境

  • vue 2 Compotision API
  • Chart.js Version 2.9.4
  • TypeScript

Chart.jsは最近Version3に更新されましたが、この記事はChart.js Version2.9.4を使っています。Chart.js3は動くには動くのですが、TypeScriptの型推論がうまく機能してくれなかったので・・・。

サンプルコード

実際のコードは次の通り。まずはテンプレート部分 。canvasタグにrefをもたせて、プログラム部分からも使えるように紐付けします。

<template>
  <div>
    charts
    <button @click="createCharts()">シャッフル</button>
    <canvas ref="canvasRef" />
  </div>
</template>

続いてScript部分。

<script lang="ts">

import { defineComponent, ref, onMounted } from '@vue/composition-api'
import { Chart } from 'chart.js'

export default defineComponent({
  setup () {
    const canvasRef = ref<HTMLCanvasElement | null>(null)
    onMounted(() => {
      createCharts()
    })
    // ランダムな数値製造マシーン
    function getRand () {
      const arr: number[] = []
      for (let i = 0; i < 6; i++) {
        arr.push(Math.random())
      }
      return arr
    }
    function createCharts () {
      if (canvasRef.value === null) return
      const canvas = canvasRef.value.getContext('2d')
      if (canvas === null) return
      console.log(canvasRef.value?.getContext('2d'))
      const c = new Chart(canvas, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: 'てすと',
            data: getRand()
          }]
        }
      })
      console.log(c)
    }
    return {
      canvasRef,
      createCharts
    }
  }
})
</script>

canvasRefはonMountedで初期化処理が終わってからじゃないと使えませんので、onMountedの中でグラフ生成の関数を呼び出しています。

getRand関数はランダムな数値の配列を作って返すだけの処理で、グラフ更新の動きを確認するために用意しました。実際に実行した画面は次の画像のようになります。

chart.jsで作成されたグラフ

chart.jsで作成されたグラフ。更新ボタンを押すとグラフが再描画されます

シャッフルボタンを押すとグラフが再描画されます。

Chart.js Version3では再描画時、すでにグラフが生成されているとエラーが発生しますので、先に生成済みのグラフを破壊する必要があります。参考:公式ガイド

TypescriptとChart.js

今回はTypeScriptで実装しましたが、Typescriptは本当にありがたいです。型があることでプログラマの間違いを教えてくれるので、開発の効率も上がり、つまらないバグの混入リスクも軽減できます。

Chart.jsでも型による恩恵を受けることができます。

Typescriptによる型推論

Typescriptによる型推論。この恩恵は一度受けたらやめられない止まらない。

しかし、Chart.js Version3ではこの型チェックがうまく機能してくれませんでした。まだはっきりとした原因はわかっていません。

MaroudではこれまでChart.js2.9.4を利用していましたので、もうしばらくはChart.js3にあげず、このままのバージョンでもいいかなと思っています。

Vue-Chart.jsは不要です。意外と簡単に実装できたchart.js

Vue-chart.jsはMixinを使うなど、記述の仕方が少しわかりにくく、どうにかならないかなーと思っていました。直接Chart.jsを使うというやり方も思いの外簡単だったので、ぜひ皆さんも試してみてください。

特にVue3でグラフが必要な場合、Vue-Chart.jsはまだVue3に対応していない(2021年4月現在)ため、必然的にChart.jsで直接グラフを作成するやり方が必須になるかと思います。開発は進んでいるようですが、自分で実装できるので、無くてもいいかな?と個人的には思いました。

開発にあたっては、「できるだけ依存は減らす」方がうまくいきます。今回のような、Vue2からVue3への大きなアップデートがあると、周辺の依存まで対応されるのを待つとかなり時間がかかってしまいます。

簡易的なラッパーであれば、自分で実装するくらいの気持ちで開発する方が精神的にも良いでしょう。

ここまで読んでくれてありがとう
今すぐ無料で始められます
E-mailやパスワード不要の仮アカウントですぐに体験できます。 ※継続的な利用の際は正規アカウントへ変換も可能です
開発者ブログ
クラウド顧客日報管理 無料あり!