【Nuxt.js v2】Chart.jsでプロパティの変更に応じてチャートを再描画する

方法は2つ

• reactiveProp
  　→プロパティで受け取ったオブジェクトが直接チャート生成に使用される。
• reactiveData
  　→プロパティで受け取ったデータを加工するなど、チャート生成前に任意の処理を入れ込める。

reactiveProp

reactivePropをmixinsに設定すると、chartDataという名前のpropsが自動で定義されます。
そのchartDataの変更は自動で検知され、チャートが更新されます。

/components/SampleBarChart.vue

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

export default {
  extends: Bar,
  mixins: [mixins.reactiveProp],
  data () {
    return {
      options: {}
    }
  },
  mounted () {
    this.renderChart(this.chartData, this.options)
  }
}
</script>

/pages/〇〇.vue

<template>
  <div>
    <SampleBarChart :chartData="chartData" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      chartData: null
    }
  },
  created () {
    this.chartData = {
      labels: ['2021年4月', '2021年5月", '2021年6月'],
      datasets: [
        {
          label: '売上',
          data: [10, 20, 15]
        }
      ]
    }
  }
}
</script>

reactiveData

reactiveDataをmixinsに設定すると、chartDataという名前のdataが自動で定義される。
propsの変更はwatchで検知し、データの加工などを行いthis.chartDataに代入することで、自動でチャートが更新されます。

/components/SampleBarChart.vue

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

export default {
  extends: Bar,
  mixins: [mixins.reactiveData],
  props: {
    propData: {
      type: Array,
      default: null
    }
  },
  data () {
    return {
      options: {}
    }
  },
  mounted () {
    this.render()
  },
  watch: {
    propData () {
      this.render()
    }
  },
  methods: {
    render () {
      this.chartData = {
        labels: ["2021年4月", "2021年5月", "2021年6月"],
        datasets: [
          {
            label: "売上",
            data: this.propData
          }
        ]
      }
    }
  }
}
</script>

/pages/〇〇.vue

<template>
  <div>
    <SampleBarChart :propData="values" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      values: null
    }
  },
  created () {
    this.values = [10, 20, 15]
  }
}
</script>