尝试在Vue应用程序中更新Chart.js中的图表数据时出现意外错误

ars1skjm  于 2023-01-30  发布在  Chart.js
关注(0)|答案(2)|浏览(222)

我正在使用Chart.js 3.5和Vue 3。我成功地绘制了一个图表,并尝试在Vue方法中触发数据更改。不幸的是,我遇到了以下问题:"未捕获的类型错误:无法设置未定义""的属性"" fullSize ""。""
Edit2:添加了缺少的}。代码现在应该可以运行
MyChart.vue:

  1. <template>
  2. <canvas id="chartEl" width="400" height="400" ref="chartEl"></canvas>
  3. <button @click="addData">Update Chart</button>
  4. </template>
  5. <script>
  6. import Chart from 'chart.js/auto';
  7. export default {
  8. name: "Raw",
  9. data() {
  10. return {
  11. chart: null
  12. }
  13. },
  14. methods: {
  15. createChart() {
  16. this.chart= new Chart(this.$refs["chartEl"], {
  17. type: 'doughnut',
  18. data: {
  19. labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
  20. datasets: [
  21. {
  22. backgroundColor: [
  23. '#41B883',
  24. '#E46651',
  25. '#00D8FF',
  26. '#DD1B16'
  27. ],
  28. data: [100, 20, 80, 20]
  29. }
  30. ]
  31. },
  32. options: {
  33. plugins: {}
  34. }
  35. })
  36. },
  37. addData() {
  38. const data = this.chart.data;
  39. if (data.datasets.length > 0) {
  40. data.labels.push('data #' + (data.labels.length + 1));
  41. for (var index = 0; index < data.datasets.length; ++index) {
  42. data.datasets[index].data.push(123);
  43. }
  44. // Edit2: added missed }
  45. this.chart.update(); } // this line seems to cause the error}
  46. }
  47. },
  48. mounted () {
  49. this.createChart()
  50. },
  51. }
  52. </script>

Edit1:将以下内容添加到选项中可以使图表成功更新,但错误仍然存在,动画也不起作用。图表 Flink 并显示最终(更新)状态。其他动画(如隐藏/显示弧线)似乎不受影响

  1. options: {
  2. responsive: true,
  3. }

编辑3:添加"maintainAspectRatio:false"选项似乎再次停止图表更新(上述错误仍然存在)
通过调试器,"chart.esm.js"中的以下函数似乎被成功调用了几次,然后在最后一次调用时出错:

  1. beforeUpdate(chart, _args, options) {
  2. const title = map.get(chart); // this returns null, which will cause the next call to error with the above mentioned exception.
  3. layouts.configure(chart, title, options);
  4. title.options = options;
  5. },
  6. //////////////////////
  7. configure(chart, item, options) {
  8. item.fullSize = options.fullSize;
  9. item.position = options.position;
  10. item.weight = options.weight;
  11. },
ee7vknir

ee7vknir1#

这可能是一个过时的帖子,但我刚刚花了几个小时的努力似乎同样的问题。也许这将帮助你和/或未来的人在这个问题上:
在将Chart对象指定为Vue组件的属性之前,请对其调用Object.seal(...)
例如:

  1. const chartObj = new Chart(...);
  2. Object.seal(chartObj);
  3. this.chart = chartObj;

这对我很有效。Vue积极地改变它权限内物体的属性以增加React性,就我所知,这将阻止Chart的内部识别这些对象,以便在需要时从其内部Map中检索它们的配置。Object.seal通过禁止向对象添加任何新属性来防止这种情况。I '我指望Chart在初始化时添加所有需要的属性--如果我注意到任何奇怪的行为,我会更新这篇文章。

d8tt03nd

d8tt03nd2#

一年后,Alan的答案也帮助了我,但是我的代码在调用chart.destroy()时失败了。
所以我搜索了一下,找到了似乎是处理它的“vue方式”:markRaw,下面是使用选项API的示例:

  1. import { markRaw } from 'vue'
  2. // ...
  3. export default {
  4. // ...
  5. beforeUnmount () {
  6. if (this.chart) {
  7. this.chart.destroy()
  8. }
  9. },
  10. methods: {
  11. createChart() {
  12. const chart = new Chart(this.$refs["chartEl"], {
  13. // ... your chart data and options
  14. })
  15. this.chart = markRaw(chart)
  16. },
  17. addData() {
  18. // ... your update
  19. this.chart.update()
  20. },
  21. },
  22. }
展开查看全部

相关问题