我被**Vue3和优秀的Chart.js**库的问题难倒了。
最初使用数据值创建图表效果很好。但对于此应用程序,图表值必须动态更新。根据Chart.js examples,这与更新图表的数据对象后在图表示例(例如,chart.update()
)上调用update()
方法一样简单。
然而,这似乎完全打破。它不更新,并导致以下警告和错误(与错误描述略有变化,取决于浏览器).[Vue warn]: Unhandled error during execution of native event handler
个Uncaught RangeError: Maximum call stack size exceeded
(Chrome)Uncaught InternalError: too much recursion
(Firefox)
我创建了一个超级简单的codesandbox.io示例here来演示这个问题。注意,要查看错误,您必须通过单击codesandbox.io渲染窗口右上角的“预览控制台”按钮来查看控制台窗口。
**有趣的数据点:**Vue3和Chart.js是最新版本。出于好奇,我逐步降级了Chart.js,发现update()
开始在email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)工作。
任何帮助将不胜感激。
(我知道vue-chartjs助手 Package 器,但出于多种原因,它不是一个好的选择。
1条答案
按热度按时间wz1wpwve1#
您需要在chartInstance周围添加
shallowRef
。import { shallowRef } from "vue";
个所以这个
chartInstance: null,
变成了chartInstance: shallowRef(null),
字符串
https://codesandbox.io/p/devbox/chart-js-vue3-basic-example-forked-t737cv?file=%2Fsrc%2Fcomponents%2FMyChart.vue%3A17%2C19