[Vue.js]Vue.jsでChart.jsのoptionsの渡し方についてのメモ

はじめに

vue.jsでchart.jsを使うとき、opitonsの書き方をよく忘れてしまうのでメモ。
構成としては、グラフそのものを表示させる「TheRerdarGraph.vue」と、
その設定をしてある「TheRerdarGraphSetting.vue」を用いる。

memo

TheRardarGraph.vue

<template>
  <div class="small">
    <the-big5-graph-setting :chart-data="datacollection" :options="options" />  /*** ←★opitonsをバインドさせる ***/
  </div>
</template>

<script>
import TheBig5GraphSetting from '@/components/object/project/TheBig5GraphSetting'

export default {
  name: 'TheBig5Graph',
  components: {
    TheBig5GraphSetting,
  },
  props: {
    analysisResult: {
      type: Object,
      required: true,
    },
  },
  data() {
    // @todo this.analysisResult.big5_** の値をグラフ用の datacollection に変換する
    // console.log('big5', this.analysisResult)
    return {
      datacollection: null,
      big5_neurotic_ism: this.analysisResult.big5_neurotic_ism,
      big5_extra_version: this.analysisResult.big5_extra_version,
      big5_openness: this.analysisResult.big5_openness,
      big5_agreeableness: this.analysisResult.big5_agreeableness,
      big5_conscientiousness: this.analysisResult.big5_conscientiousness,
/************************* ★optionsの書き方★ *************************/
      options: {
        scale: {
          ticks: { //http://www.chartjs.org/docs/#scales-radial-linear-scale
            stepSize: 10, // 目盛の間隔
            max: 100, //最大値
          }
        },
        legend: {
          display: false,
        },
      },
    }
/************************* ★optionsの書き方★ *************************/
  },
  mounted() {
    this.fillData()
  },
  methods: {
    fillData() {
      this.datacollection = {
        labels: ['感情性', '外向性', '開放的', '協調性', '誠実性'],
        datasets: [
          {
            label: '1',
            backgroundColor: 'rgba(244, 40, 88,0.3)',
            data: [
              this.big5_neurotic_ism,
              this.big5_extra_version,
              this.big5_openness,
              this.big5_agreeableness,
              this.big5_conscientiousness,
            ],
          },
        ],
      }
    },
    getRandomInt() {
      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
    },
  },
}
</script>

<style>
.small {
  max-width: 300px;
}
</style>

TheRardarGraphSetting.vue

<script>
import { Radar, mixins } from 'vue-chartjs'
const { reactiveProp } = mixins

export default {
  name: 'TheBig5GraphSetting',
  extends: Radar,
  mixins: [reactiveProp],
  props: ['options', 'chartData'],
  mounted() {
    // this.chartData is created in the mixin.
    // If you want to pass options please create a local options object
    this.renderChart(this.chartData, this.options)
  },
}
</script>

<style></style>