Die Google-Diagrammanimation verliert an Sichtbarkeit, wenn sich die Diagrammdaten ändern

Question

Ich habe Probleme damit, dass die Google Chart-Animationen ordnungsgemäß funktionieren. Ich denke, das Problem besteht darin, dass das Diagramm ständig neu gezeichnet wird, anstatt nur die Daten zu aktualisieren, aber basierend auf dem Beispielcode von Google und meinen begrenzten JavaScript-Kenntnissen bin ich mir nicht sicher, wie ich das beheben kann. Ich möchte keine Schaltfläche zum Aktualisieren des Diagramms einfügen, da das Diagramm letztendlich die Daten aus der Datenquelle dynamisch aktualisiert. Wie aktualisiere ich mein Diagramm, um Datenänderungen richtig zu animieren? Referenz: https://developers.google.com/chart/interactive/d

P粉301523298 · Answer

为了使图表从一个数据集动画到下一个数据集，您需要保留对同一图表的引用，而不是每次绘制时创建新的图表。

请参考以下示例...

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

注意：Google饼图不支持动画效果。

Die Google-Diagrammanimation verliert an Sichtbarkeit, wenn sich die Diagrammdaten ändern

Antworte allen(1)Ich werde antworten