搜索

首页  >  问答  >  正文

在Vue中使用Chart.js更新图表时出现"未捕获的(在Promise中)RangeError:超出最大调用栈大小"

我在 Mounted() 中创建了一个图表对象,并将其分配给在 data() 中声明的“myChart”变量,因为我希望能够在代码的其他范围中使用此图表对象,因为我听说没有将 Mounted 中声明的变量传递给方法的方法。

当我调用 this.myChart.update() 时,收到错误“未捕获(承诺中)RangeError:超出最大调用堆栈大小”。

有谁知道我为什么会收到此错误以及如何纠正它,或者是否有其他方法可以从手表或方法中访问已安装的变量?

<script>
    import Chart from 'chart.js/auto';
    export default {
        name: 'ChartTest',
        props: {
            data: Object,
            title: String,
    },
    data() {
        return {
            myChart:'' //variable declared
        }
    },
    watch: {
        data:function() {
            this.myChart.update()  //error here
        }
    },       
        mounted() {
           const progressChart=new Chart(document.getElementById("progress-chart"), {
                type: 'line',
                data: this.data,
                options: {
                    plugins: {
                        title: {
                            display: true,
                            text: this.title
                        }
                    },
                    scales: {

                        y: {
                            display: true,
                            stacked: true,
                            max: 0,
                            min: 100,
                            title: {
                                display: true,
                                text: 'Your Score (%)'
                            }
                        }
                    }
                }
           });
            this.myChart=progressChart //assigning myChart variable to chartjs object
    }     
}
</script>


P粉595605759P粉595605759354 天前661

全部回复(1)我来回复

  • P粉465675962

    P粉4656759622024-01-05 00:28:47

    chart.js 与 Vue 并非 100% 完全兼容。因为 Chart.js 直接操作 DOM(对于普通 js 应用程序来说非常好),这会扰乱 Vue 对 DOM 的跟踪和管理,而 Vue 和 Chart.js 之间操作 DOM 的拉锯战才是最重要的。可能会导致您看到有关超出最大调用堆栈大小的错误。我能想到的解决方法有两种:

    1. 让你的图表不响应,这样 Vue 就不会跟踪它的变化。这是通过在数据函数的 return 语句之外创建 myChart 变量来完成的:
    data() {
        this.myChart = null;
        return {
          // myChart: '' //variable declared
        };
      },
    

    与上述无关,但无论您需要修复还是错误:您需要先设置数据,然后才能调用图表 update() 函数

    watch: {
        data: function () {
          this.myChart.data = this.data;
          this.myChart.update();
        }
      },
    

    现在您的图表应该可以工作并更新,尽管它不会做出反应。如果这对您很重要,为什么不尝试一下

    1. vue-chartjs,chart.js 的 Vue 包装器实现。我不确定它是否具有 Chart.js 的所有功能,但会给您一个与 Vue 兼容的反应式图表。

    回复
    0
  • 取消回复