![見出し画像](https://assets.st-note.com/production/uploads/images/52043932/rectangle_large_type_2_b765807f0e762db5df77e98577cb1951.png?width=1200)
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のデータを当ててあげることで、親コンポーネントからデータを指定することができます。
参考にしたページはこちらです。