简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Die Google-Diagrammanimation verliert an Sichtbarkeit, wenn sich die Diagrammdaten ändern
P粉170438285
P粉170438285 2023-09-02 12:32:58
0
1
595

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/docs/animation
P粉170438285
P粉170438285

Antworte allen (1)
P粉301523298
P粉3015232982023-09-03 09:22:36 1 Etage

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

请参考以下示例...

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

Wie+0
Antwort hinzufügen
    Beliebte Themen
    Mehr>
    Populäre Artikel
    Beliebte Tutorials
    Mehr>
    Verwandte Tutorials
    Beliebte Empfehlungen
    Aktuelle Kurse
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage
    Über uns Haftungsausschluss Sitemap
    Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！