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饼图不支持动画效果。

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial