Vue Chart.js 组件不渲染
Vue Chart.js component does not render
仪表板获取包含 10 个元素的数据数组 chdata
属性。每 0.5s 数组更新一次新项目。我可以看到,数据集中的数据正在发生变化,但未显示图表。
悬停时也会出现此错误 Uncaught TypeError: Cannot read property 'skip' of undefined
。
//LineChart.vue
<script>
import {
Line,
mixins
} from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveData],
props: ["options"],
data() {
return {
chartData: {
labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
datasets: [{
label: 'Data One',
borderColor: '#e67e22',
pointBackgroundColor: '#e67e22',
borderWidth: 1,
pointBorderColor: '#e67e22',
backgroundColor: 'transparent',
data: this.$root.$data.chdata
}]
},
}
},
mounted() {
this.renderChart(this.chartData, {
responsive: true,
maintainAspectRatio: false,
animation: false,
//Boolean - If we want to override with a hard coded scale
scaleOverride: true,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: 20,
//Number - The value jump in the hard coded scale
scaleStepWidth: 10,
//Number - The scale starting value
scaleStartValue: 0
});
},
watch: {
chartData: function() {
this._chart.destroy()
this.renderChart(this.data, this.options)
// this._chart.update()
}
}
});
</script>
我在 mounted()
中制作了这个:
var self = this;
self.set = setInterval(function() {
self._chart.update()
}, 200);
我对此并不满意。
问题是您没有更新标签。
您在标签数组中定义了 10 个项目。这适用于 10 个数据条目。
如果将新条目推送到数据数组,还需要添加新标签。否则 chart.js 将抛出此错误。
仪表板获取包含 10 个元素的数据数组 chdata
属性。每 0.5s 数组更新一次新项目。我可以看到,数据集中的数据正在发生变化,但未显示图表。
悬停时也会出现此错误 Uncaught TypeError: Cannot read property 'skip' of undefined
。
//LineChart.vue
<script>
import {
Line,
mixins
} from 'vue-chartjs'
export default Line.extend({
mixins: [mixins.reactiveData],
props: ["options"],
data() {
return {
chartData: {
labels: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
datasets: [{
label: 'Data One',
borderColor: '#e67e22',
pointBackgroundColor: '#e67e22',
borderWidth: 1,
pointBorderColor: '#e67e22',
backgroundColor: 'transparent',
data: this.$root.$data.chdata
}]
},
}
},
mounted() {
this.renderChart(this.chartData, {
responsive: true,
maintainAspectRatio: false,
animation: false,
//Boolean - If we want to override with a hard coded scale
scaleOverride: true,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps: 20,
//Number - The value jump in the hard coded scale
scaleStepWidth: 10,
//Number - The scale starting value
scaleStartValue: 0
});
},
watch: {
chartData: function() {
this._chart.destroy()
this.renderChart(this.data, this.options)
// this._chart.update()
}
}
});
</script>
我在 mounted()
中制作了这个:
var self = this;
self.set = setInterval(function() {
self._chart.update()
}, 200);
我对此并不满意。
问题是您没有更新标签。 您在标签数组中定义了 10 个项目。这适用于 10 个数据条目。
如果将新条目推送到数据数组,还需要添加新标签。否则 chart.js 将抛出此错误。