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.