L'animation du graphique Google perd sa visibilité lorsque les données du graphique changent

Question

J'ai du mal à faire fonctionner correctement les animations Google Chart. Je pense que le problème est que le graphique continue de se redessiner au lieu de simplement mettre à jour les données, mais sur la base de l'exemple de code de Google et de ma connaissance limitée de JavaScript, je ne sais pas comment résoudre ce problème. Je ne souhaite pas inclure de bouton pour mettre à jour le graphique, car celui-ci mettra éventuellement à jour dynamiquement les données de la source de données. Comment mettre à jour mon graphique pour animer correctement les modifications de données ? Référence : https://developers.google.com/chart/interactive/d

P粉301523298 · Answer

Pour qu'un graphique s'anime d'un ensemble de données à l'autre, vous devez conserver une référence au même graphique au lieu de créer un nouveau graphique à chaque fois que vous dessinez.

Veuillez vous référer aux exemples suivants...

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(initChart);
var chart;

function initChart() {
  chart = new google.visualization.ColumnChart(document.getElementById('pizzaChart'));
  drawChart();
}

function drawChart() {

  var mushroomData = Math.floor(Math.random() * 11);
  document.getElementById("logger").innerHTML = mushroomData;

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Topping');
  data.addColumn('number', 'Slices');
  data.addRows([
    ['Mushrooms', mushroomData],
    ['Onions', 1],
    ['Olives', 1],
    ['Zucchini', 1],
    ['Pepperoni', 2]
  ]);

  var options = {
    title: 'How Much Pizza I Ate Last Night',
    width: '100%',
    animation: {duration: 1000, easing: 'out'}
  };

  chart.draw(data, options);
}

setInterval(drawChart, 1000);

Remarque : les diagrammes circulaires Google ne prennent pas en charge les effets d'animation.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket