以下の順で確認すればよいかなと思います。
データの指定の仕方は正しいか
そもそも間違ってたら描画されないよねというお話（当たり前）。
mixinsにreactivePropを指定しているか
Chart.jsでは、データの変更に対してリアクティブに描画を変えるという機能がありません。
vue.jsでは、mixinsにreactiveProp or reactiveDataのいずれかを指定することでデータが更新されたらリアクティブ再描画を行います1。
<script>
import {Radar, mixins} from 'vue-chartjs'
export default {
extends: Radar,
mixins: [mixins.reactiveProp],
props: ['chartData', 'options'],
mounted () {
this.renderChart(this.chartData, this.options);
}
}
</script>
実はchart.js側の問題でない場合も
今回自分が遭遇したケースです。
dataset自体は更新されているのに描画が更新されませんでした。
これはVueが新規に追加されたプロバティの追加を検知できないためでした。
新規に追加されたプロバティをリアクティブにするにはVue.setを使えば良いです2。
ダメなパターンです。
理由は、rendar()メソッド内で新しく追加されたプロバティをVueが検知できないためです。
<template>
<v-ons-carousel swipeable auto-scroll>
<v-ons-carousel-item v-for="(item, itemIndex) in items" :key="itemIndex">
<radar-chart :chartData="chartDataSets[itemIndex]" :options="chartOption" :styles="{'display':'flex', 'justify-content':'center'}"></radar-chart>
</v-ons-carousel-item>
</v-ons-carousel>
</template>
<script>
import Vue from 'vue';
import {_} from 'vue-underscore';
import RadarChart from '@/components/common/radarChart';
export default {
data() {
return {
labels: [ 'label1', 'label2', 'label3' ],
chartDataSets: {},
}
}
methods: {
rendar: {
_.each ( datasets, (dataset, index) => ){
this.chartDataSets[index] = {};
this.chartDataSets[index].labels = this.labels;
this.chartDataSets[index].datasets = [];
this.chartDataSets[index].datasets.push( { data: dataset } );
});
},
}
}
</script>
代わりにVue.set()を使用することで、Vueがプロバティの追加を検出できるようになります。
<script>
import Vue from 'vue';
import {_} from 'vue-underscore';
import RadarChart from '@/components/common/radarChart';
export default {
data() {
return {
labels: [ 'label1', 'label2', 'label3' ],
chartDataSets: {},
}
}
methods: {
rendar: {
_.each ( datasets, (dataset, index) => ){
this.chartDataSets[index] = {};
this.chartDataSets[index].labels = this.labels;
this.chartDataSets[index].datasets = [];
this.chartDataSets[index].datasets.push( { data: } );
let obj = {};
obj.labels = this.labels;
obj.datasets = [];
obj.datasets.push( { data: dataset } );
Vue.set( this.chartDataSets, index, obj);
});
},
}
}
</script>