"Uncaught (in Promise) RangeError : taille maximale de la pile d'appels dépassée" lors de la mise à jour du graphique à l'aide de Chart.js dans Vue

Question

J'ai créé un objet graphique dans Mounted() et je l'ai attribué à la variable "myChart" déclarée dans data() car je voulais pouvoir utiliser cet objet graphique dans d'autres portées du code car j'ai entendu dire qu'il n'y avait pas de méthode qui passe variables déclarées dans Mounted dans la méthode.

Lorsque j'appelle this.myChart.update(), j'obtiens l'erreur "Uncaught (in promise) RangeError : taille maximale de la pile d'appels dépassée".

Est-ce que quelqu'un sait pourquoi j'obtiens cette erreur et comment la corriger, ou s'il existe un autre moyen d'accéder aux variables montées à partir d'une montre ou d'une méthode ?

<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>

Answer 1

chart.js n'est pas entièrement compatible à 100 % avec Vue. Étant donné que Chart.js manipule directement le DOM (ce qui est idéal pour les applications js normales), cela perturberait le suivi et la gestion du DOM par Vue, et le bras de fer entre Vue et Chart.js pour la manipulation du DOM est ce qui compte le plus. . Cela peut entraîner des erreurs concernant le dépassement de la taille maximale de la pile d'appels. Il y a deux solutions auxquelles je peux penser :

1. Faites en sorte que votre graphique ne réponde plus afin que Vue ne suive pas ses modifications. Cela se fait en créant la variable myChart en dehors de l'instruction return de la fonction data :

data() {
    this.myChart = null;
    return {
      // myChart: '' //variable declared
    };
  },

Pas lié à ce qui précède, mais que vous ayez besoin d'un correctif ou d'un bug : vous devez configurer les données avant de pouvoir appeler la fonction graphique update()

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

Maintenant, votre graphique devrait fonctionner et se mettre à jour, même s'il ne réagira pas. Si c'est important pour vous, pourquoi ne pas essayer

2. vue-chartjs, implémentation du wrapper Vue de chart.js. Je ne sais pas s'il possède toutes les fonctionnalités de Chart.js, mais je vous donnerai un graphique réactif compatible avec Vue.