前提条件¶

• webpackを利用しています。
• vue-cilを利用してベースを作成済み

公式サイト：https://vue-chartjs.org/#/home

使用準備¶

1. プロジェクト作成

   vue init webpack vue-chart-sample
   

   ※ すでにプロジェクトが存在する場合には本作業は不要です。

2. 依存関連の追加

   npm install chart.js vue-chartjs
   

グラフ表示用のコンポーネント作成¶

pjルート/src/components

chart/LineChart.vue

vue-chartjsでは「mixins.reactiveData」とすることでreactiveなデータのグラフ対応をすることができます。

また自動的にthis.chartData が付与され、値を設定することでグラフが描写されます。

<script>
import {Line, mixins} from 'vue-chartjs'

export default {
  name: 'LineChart',
  extends: Line,
  mixins: [mixins.reactiveData],
  props: {
    data: null,
    options: null
  },
  mounted () {
    this.chartData = this.data
  },
  watch: {
      data: function() {
        this.chartData = this.data
      }
    }
}
</script>

<style>

</style>

LineChartSample.vue

<template>
    <div>
        <button type='button' v-on:click='add'>{{btnName}}</button>
        <line-chart
            :data="chartData"
            :options="options"
            :height="100"
        ></line-chart>
    </div>
</template>

<script>
import LineChart from "./chart/LineChart.vue";
export default {
  name: "ChartLineSample",
  components: {
    LineChart
  },
  data: function() {
    return {
      counter: 0,
      btnName: '追加',
      chartData: {
        labels: [],
        // データ詳細
        datasets: [
          {
            label: "データ",
            data: []
          }
        ]
      },
      options: {responsive: true
                      , maintainAspectRatio: true
                      , animation: false},
      addFlag: false
    };
  },
  methods: {
    add: function() {
      this.addFlag = !this.addFlag;
      if (this.addFlag) {
        this.addData();
        this.btnName = '停止'
      } else {
        this.btnName = '追加'
      }
    },
    addData: function() {
      const newChartData = Object.assign({}, this.chartData)
      this.counter++;
      newChartData.labels.push(this.counter);
      let value = Math.floor(Math.random() * Math.floor(100));
      newChartData.datasets[0].data.push(value);
      this.chartData = newChartData
      setTimeout(() => {
        if (this.addFlag) {
          this.addData();
        }
      }, 1000);
    }
  },
  created: function() {
    this.addData();
  }
};
</script>

<style>
</style>

実行結果