【Vue】vue-chartjs / グラフ作成 ～ 入門編 ～

■ はじめに

今回は、VueベースのWebサイトに
比較的容易にグラフを作成できる
vue-chartjs について扱う。

目次

【１】vue-chartjs とは？
【２】デモ
【３】環境設定
【４】グラフ作成手順
【５】サンプル

【１】vue-chartjs とは？

https://vue-chartjs.org/ja/guide/

より抜粋
~~~~~~~~~~~~~
 Chart.js をvueで使用するためのラッパー
~~~~~~~~~~~~~

Chart.js について
https://www.chartjs.org/

より抜粋
~~~~~~~~~~~~~
Simple yet flexible JavaScript charting for designers & developers

デザイナと開発者のための シンプルかつ柔軟なJavaScriptチャート
~~~~~~~~~~~~~

【２】デモ

https://www.chartjs.org/docs/latest/charts/
https://demo.isystk.com/nuxtjs/chart/circle

から、
~~~~~~~~~~~~
* 折れ線グラフ
* 棒グラフ
* 円グラフ
* 散布図
~~~~~~~~~~~~
などのデモを確認することができる。

【３】環境設定

npm install vue-chartjs chart.js --save

エラー「Property 'chartData' has no initializer」対策

　以下の「エラー内容」がでてくるので、
以下のサイトに書いてある通り、
チェックしないように「"strictPropertyInitialization": false,」を追加。

https://tech-up.hatenablog.com/entry/2019/03/15/152258
エラー内容

Property 'chartData' has no initializer and is not definitely assigned in the constructor
Property 'options' has no initializer and is not definitely assigned in the constructor

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "strictPropertyInitialization": false,

【４】グラフ作成手順

１）コンポーネントを作る
２）コンポーネントを配置する

【５】サンプル

ファイル構成

my-app << 対象プロジェクト
 + src
     + components
      |  + DemoChart.vue << 新規追加
     + views
         + Home.vue << 修正

DemoChart.vue

<script lang="ts">
import { Component, Mixins, Prop, Watch } from "vue-property-decorator";
import Chart from "chart.js";
import VueChart from "vue-chartjs";
const Line = VueChart.Line;
const reactiveProp = VueChart.mixins.reactiveProp;

@Component({})
export default class DemoChartComponent extends Mixins(Line, reactiveProp) {

  @Prop({ default: {} }) chartData: Chart.ChartData;
  @Prop({ default: {} }) options: Chart.ChartOptions;

  constructor() {
    super();
  }

  mounted(): void {
    this.renderChart(this.chartData, this.options);
  }

  @Watch("chartData")
  onChangeChartData(): void {
    this.renderChart(this.chartData, this.options);
  }

  @Watch("options")
  onChangeOptions(): void {
    this.renderChart(this.chartData, this.options);
  }
}
</script>

Home.vue

<template>
  <div class="chart-container">
    <div>Sample</div>
    <DemoChart :chartData="chartData" :options="chartOption" :styles="chartStyles" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ChartData, ChartOptions } from "chart.js";
import DemoChart from "@/components/DemoChartComponent.vue";

@Component({ components: { DemoChart } })
export default class Home extends Vue {
  private chartData: ChartData = {
    labels: ["A", "B", "C", "D", "E"],
    datasets: [
      {
        label: "Hello",
        data: [1, 5, 3, 4, 3]
      },
      {
        label: "World",
        data: [2, 3, 4, 5, 8]
      }
    ]
  };

  private chartOption: ChartOptions = {
    maintainAspectRatio: false
  };

  private chartStyles = {
    height: "100%",
    width: "100%"
  };
}
</script>

<style lang="scss">
.chart-container {
  position: relative;
  height: 40vh;
  width: 80vw;
  margin: 0 auto;
}
</style>

参考文献

https://blog.isystk.com/system_develop/frontend/vuejs/778/
https://qiita.com/kira_puka/items/5de099c96b68885f8574

関連記事

Vue ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000