2
votes

Chartjs (Non Vue) ne rend pas le graphique graphique dans V-if / V-show

J'ai une page contenant plusieurs graphiques dessinés à l'aide de chartjs. Le problème est que lorsque je dessine le graphique à l'intérieur d'un div alors qu'il est masqué par v-if ou v-show, le graphique n'apparaîtra pas lorsque la condition change et que le div masqué apparaît. Y a-t-il un moyen de le faire. J'ai essayé d'utiliser update mais cela ne fonctionne pas. Le graphique n'apparaît que lorsqu'il est créé au moment où le div concerné n'est pas masqué.

chart.js vuejs2

0 commentaires

4 Réponses :

0
votes

Je suggérerais de mettre la fonction init du graphique dans la même méthode, ou de créer une méthode d'observateur, comme celle responsable de montrer / masquer l'élément.

Comme:

  watch: {
    visible: function (visible) {
      if (visible) this.initChartMethod()
    }
  }

2 commentaires

Mais pour cela, je devrai enregistrer les données là où j'ai obtenu lorsque le div est masqué et dessiner un graphique avec ces données enregistrées. N'y a-t-il pas un moyen quand je parviens à dessiner le quand le div est caché et qu'il peut apparaître quand le div apparaît.

Vérifiez attentivement le DOM, car je suis presque sûr que le graphique, en fait, est rendu dans le div caché. Cependant, il n'a tout simplement aucune dimension avec laquelle calculer sa taille, il est donc rendu de taille 0px. Il est plus courant que de ne pas enregistrer les données quelque part, que ce soit sur l'élément HTML lui-même ou sur le composant Vue. Je recommanderais d'utiliser v-show car vous saurez alors que tout changement en cours ou est sur DOM mais tout simplement pas visible. S'il y a une contrainte dure sur l'ajout de données de graphique au composant Vue, essayez de créer un attribut de données sur le conteneur de graphique comme data-chart = ""

0
votes

Si ce n'est déjà fait, vous devriez essayer d'utiliser vue-chartjs . Il gérera tout le câblage des données dynamiques de vue.

0 commentaires

0
votes

Lorsque le booléen showChart est modifié, tout le contenu de la div externe est de nouveau rendu ou détruit. Si le div détruit est à nouveau rendu, vous devez également lancer le graphique lorsque l'heure de showChart devient true .

0 commentaires

1
votes

J'ai également rencontré ce problème avec vue-chartjs. Ce qui a fonctionné pour moi, c'est d'utiliser v-show à la place.

Le bloc que j'avais précédemment dans v-else, je sais que j'ai mis un nouveau bloc v-if

<div v-show="visualizationData">
    <myChart :chartData="visualizationData" :height="350" />
</div>

<div v-if="visualizationData === null">
    <div class="loadingIndicator">
		    Loading...
		</div>
</div>

0 commentaires