vue-chart.jsのpropsを使ってみる。　（メモ）

vue-chart.jsを使っていく中で、チャートの数値をpropsで呼び出した上でのチャートの描写を行なったので、メモしておこうと思います。

まずは、子コンポーネント。

<script>
//Chart.vue

import { Radar } from 'vue-chartjs';

export default {
extends: Radar,
name: 'chart',
props: {
  chartdata : {
    type: Array
  }
}, 
data () {
  return {
    data: {
      labels: [
        '待遇面の満足度', '社員の士気', '風通しの良さ', '社員の相互尊重', '20代成長環境', '人材の長期育成', '法令遵守意識', '人事評価の適正感'
      ],
      datasets: [
        {
          label: '',
          data: this.chartdata,
          backgroundColor: [
            'rgb(213, 238, 249, 0.6)'
          ],
          borderColor: [
            '#4F92BA'
          ],
          borderWidth: 1,
          tension: 0,
          pointBorderColor: '#4F92BA',
          pointBackgroundColor: '#4F92BA'
        },
      ],
    },
    options: {
      legend: {
        display: false
      },
      scale: {
        ticks: {
          beginAtZero:true,
          stepSize: 1,
        }
      },
      tooltips: {
        enabled: false
      }
    },
  }
},
mounted () {
  this.renderChart(this.data, this.options)
}
}
</script>

重要なことは、data部分をpropsにするために

data: this.chartdata,

とすることです。

次に、親コンポーネント。

<template>
　　　　<v-row justify="center">
　　　　　　　　<v-col cols="4">
　　　　　　　　　　　　<Chart :chartdata='chartdata'/>
             </v-col>                                    
       </v-row>
</template>

<script>
import Chart from '../components/charts/Chart'

export default {
   name: 'BigChart',
   components: {
       Chart
   },
   data() {
       return {
           datas: '',
           model: null,
           chartdata: [3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0, 3.0]
       }
}
</script>

親コンポーネントで

<Chart :chartdata='chartdata'/>

としてpropsのデータを当ててあげることで、親コンポーネントからデータを指定することができます。

参考にしたページはこちらです。