我正在使用Chart.js 3.5和Vue 3。我成功地绘制了一个图表，并尝试在Vue方法中触发数据更改。不幸的是，我遇到了以下问题："未捕获的类型错误：无法设置未定义""的属性"" fullSize ""。""
Edit2：添加了缺少的}。代码现在应该可以运行
MyChart.vue:
<template>
<canvas id="chartEl" width="400" height="400" ref="chartEl"></canvas>
<button @click="addData">Update Chart</button>
</template>
<script>
import Chart from 'chart.js/auto';
export default {
name: "Raw",
data() {
return {
chart: null
}
},
methods: {
createChart() {
this.chart= new Chart(this.$refs["chartEl"], {
type: 'doughnut',
data: {
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
datasets: [
{
backgroundColor: [
'#41B883',
'#E46651',
'#00D8FF',
'#DD1B16'
],
data: [100, 20, 80, 20]
}
]
},
options: {
plugins: {}
}
})
},
addData() {
const data = this.chart.data;
if (data.datasets.length > 0) {
data.labels.push('data #' + (data.labels.length + 1));
for (var index = 0; index < data.datasets.length; ++index) {
data.datasets[index].data.push(123);
}
// Edit2: added missed }
this.chart.update(); } // this line seems to cause the error}
}
},
mounted () {
this.createChart()
},
}
</script>Edit1：将以下内容添加到选项中可以使图表成功更新，但错误仍然存在，动画也不起作用。图表 Flink 并显示最终（更新）状态。其他动画（如隐藏/显示弧线）似乎不受影响
options: {
responsive: true,
}编辑3：添加"maintainAspectRatio：false"选项似乎再次停止图表更新（上述错误仍然存在）
通过调试器，"chart.esm.js"中的以下函数似乎被成功调用了几次，然后在最后一次调用时出错：
beforeUpdate(chart, _args, options) {
const title = map.get(chart); // this returns null, which will cause the next call to error with the above mentioned exception.
layouts.configure(chart, title, options);
title.options = options;
},
//////////////////////
configure(chart, item, options) {
item.fullSize = options.fullSize;
item.position = options.position;
item.weight = options.weight;
},
2条答案
按热度按时间ee7vknir1#
这可能是一个过时的帖子，但我刚刚花了几个小时的努力似乎同样的问题。也许这将帮助你和/或未来的人在这个问题上：
在将Chart对象指定为Vue组件的属性之前，请对其调用
Object.seal(...)。例如：
这对我很有效。Vue积极地改变它权限内物体的属性以增加React性，就我所知，这将阻止Chart的内部识别这些对象，以便在需要时从其内部Map中检索它们的配置。
Object.seal通过禁止向对象添加任何新属性来防止这种情况。I '我指望Chart在初始化时添加所有需要的属性--如果我注意到任何奇怪的行为，我会更新这篇文章。d8tt03nd2#
一年后，Alan的答案也帮助了我，但是我的代码在调用
chart.destroy()时失败了。所以我搜索了一下，找到了似乎是处理它的“vue方式”：
markRaw，下面是使用选项API的示例：