vue-chartjsを使ってVue.jsでキレイなグラフを描画する

こんにちは、@NemotoTatsuroです。
Chart.jsをVueで使用するためのラッパーであるvue-chartjsを使って、キレイなグラフを描画していきたいと思います。

vue-chartjsのインストール

npm install vue-chartjs chart.js --save

グラフを描画するcomponent作成

componentsディレクトリにBarChart.vueを作成します。

<script>
import { Bar } from "vue-chartjs";

export default {
  extends: Bar,
  mounted() {
    this.renderChart(
      {
        labels: [
          "2019/09/01",
          "2019/09/02",
          "2019/09/03",
          "2019/09/04",
          "2019/09/05",
          "2019/09/06",
          "2019/09/07",
          "2019/09/08",
          "2019/09/09",
          "2019/09/10"
        ],
        datasets: [
          {
            backgroundColor: "rgba(60,141,188,0.9)",
            borderColor: "rgba(60,141,188,0.8)",
            pointRadius: false,
            pointColor: "#3b8bba",
            pointStrokeColor: "rgba(60,141,188,1)",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(60,141,188,1)",
            data: [28, 48, 40, 19, 86, 27, 90, 28, 48, 40]
          },
          {
            backgroundColor: "rgba(210, 214, 222, 1)",
            borderColor: "rgba(210, 214, 222, 1)",
            pointRadius: false,
            pointColor: "rgba(210, 214, 222, 1)",
            pointStrokeColor: "#c1c7d1",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40, 65, 59, 80]
          }
        ]
      },
      {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          xAxes: [
            {
              stacked: true
            }
          ],
          yAxes: [
            {
              stacked: true
            }
          ]
        }
      }
    );
  }
};
</script>

グラフを描写するcomponentのVueファイルに<template>タグは使えないので注意!

グラフを表示するVueにcomponent配置

グラフを表示させたいVueファイルに、先程のグラフを描写するcomponentを配置します。

<template>
  <div>
    <bar-chart />
  </div>
</template>

<script>
import Vue from 'vue'
import BarChart from '@/components/BarChart'

export default {
  components: {
    BarChart
  }
}

Vue.component('bar-chart', BarChart)
</script>

これで下記のようなキレイなグラフが簡単に描けます。

vue_chartjs_bar_chart

基本的にはChert.jsで用意されているオプションを使用できるので、棒グラフや線グラフ、円グラフ、分布図、レーダーチャートなどなど、様々なグラフにカスタマイズ出来ます。

またVueならではのチャートデータを動的に更新してのグラフ描写も可能なようですよ。

vue-chartjsの詳細は公式ガイド、Chart.jsのオプションは公式ドキュメントをご確認ください。

Nemoto Tatsuro
Freelance Frontend/Serverside Engineer

フロントエンドもサーバーサイドもやるフリーランスエンジニア。
大学で分子生物学を専攻後、東日本大震災の直後に中小SIerへ就職。
その後ベンチャーへ転職し、2017年にフリーランスへ転向しました。

技術スキルはHTML/CSS(Sass)/JavaScript(jQuery/Node.js/Vue.js)/PHP(Laravel/WordPress)/C#など。
Webシステム開発やWordPressを使ったサイト制作が得意分野です。