Auf dieser Seite wird beschrieben, wie Sie Änderungen an einem Diagramm animieren, anstatt sie sofort anzuwenden.
Inhalt
Übersicht
Google-Diagramme können auf zwei Arten reibungslos animiert werden: entweder beim Start, wenn Sie das Diagramm zum ersten Mal zeichnen, oder wenn Sie ein Diagramm neu zeichnen, nachdem Sie eine Änderung an Daten oder Optionen vorgenommen haben.
So animieren Sie Ihre Creatives beim Start:
- Legen Sie die Diagrammdaten und -optionen fest. Legen Sie eine Animationsdauer und einen Easing-Typ fest.
-
Legen Sie
animation: {"startup": true}
fest. Wenn Sie dies in den Optionen festlegen, beginnt das Diagramm mit den in der Referenz gezeichneten Serienwerten und wird in den endgültigen Zustand animiert. - Rufen Sie
chart.draw()
auf und übergeben Sie Ihre Daten und Optionen.
So animieren Sie einen Übergang:
- Beginnen Sie mit einem bereits gerenderten Diagramm.
- Ändern Sie die Datentabelle oder -optionen. Verschiedene Diagrammtypen unterstützen unterschiedliche Änderungen. Unter Unterstützte Änderungen erfahren Sie, welche Änderungen für welche Diagrammtypen unterstützt werden.
- Geben Sie das Übergangsverhalten mit der Option Animation an.
- Rufen Sie
chart.draw()
in Ihrem Diagramm auf, um zu den neuen Werten zu wechseln.
Hier ein einfaches Beispiel, das den einzelnen Wert in einem Balkendiagramm bei jedem Klick auf eine Schaltfläche ändert:
function init() { var options = { width: 400, height: 240, animation:{ duration: 1000, easing: 'out', }, vAxis: {minValue:0, maxValue:1000} }; var data = new google.visualization.DataTable(); data.addColumn('string', 'N'); data.addColumn('number', 'Value'); data.addRow(['V', 200]); var chart = new google.visualization.ColumnChart( document.getElementById('visualization')); var button = document.getElementById('b1'); function drawChart() { // Disabling the button while the chart is drawing. button.disabled = true; google.visualization.events.addListener(chart, 'ready', function() { button.disabled = false; }); chart.draw(data, options); } button.onclick = function() { var newValue = 1000 - data.getValue(0, 1); data.setValue(0, 1, newValue); drawChart(); } drawChart(); }
Unterstützte Änderungen
Die Unterstützung für verschiedene Übergangstypen unterscheidet sich von Diagramm zu Diagramm. Es gibt folgende Arten von Umstellungen:
- Nur Änderungen an Datentabellenwerten. Die Anzahl der Zeilen und Spalten ist gleich und die Spalten behalten ihre ursprünglichen Typen und Rollen bei.
- Spalten (Reihen) hinzufügen oder entfernen.
- Zeilen (Kategorien) hinzufügen oder entfernen
-
Änderungen an Diagrammoptionen. Derzeit werden folgende Optionen animiert:
-
das Ansichtsfenster (
vAxis.viewWindow.min
,vAxis.viewWindow.max
,hAxis.viewWindow.min
,hAxis.viewWindow.max
) – Das Ändern des Ansichtsfensters ist nützlich, um „Zoomen“ und kontinuierliche „Drift“-Effekte zu erzielen (siehe Beispiele unten) -
vAxis.ticks
- undhAxis.ticks
-Werte vAxis.gridlines.count
undhAxis.gridlines.count
vAxis.direction
undhAxis.direction
vAxis.baseline
undhAxis.baseline
vAxis.logScale
undhAxis.logScale
- Diagrammgröße (
height
undwidth
) -
Diagrammbereich (
chartArea.height
,chartArea.width
,chartArea.top
,chartArea.left
)
-
das Ansichtsfenster (
Änderungstyp | Gültige Diagrammtypen |
---|---|
Wertänderungen | Streudiagramm, Liniendiagramm, Flächendiagramm, Balkendiagramm, Blasendiagramm, Säulendiagramm, Kerzendiagramm, Stufen-Flächendiagramm, Kombinationsdiagramm, Tachometerdiagramm |
Zeilen hinzufügen oder entfernen | Streudiagramm, Liniendiagramm, Flächendiagramm, Blasendiagramm, Kombinationsdiagramm (nur für Linien-/Flächenreihen) |
Spalten hinzufügen/entfernen | Streudiagramm, Liniendiagramm, Flächendiagramm, Balkendiagramm, Blasendiagramm, Säulendiagramm, Kerzendiagramm, Stufen-Flächendiagramm, Kombinationsdiagramm |
Diagrammoptionen ändern | Streudiagramm, Liniendiagramm, Flächendiagramm, Balkendiagramm, Blasendiagramm, Säulendiagramm, Kerzendiagramm, Stufen-Flächendiagramm, Kombinationsdiagramm |
Verhalten bei der Umstellung
Name | |
---|---|
Animation.Dauer |
Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Animationsdokumentation. Typ: Zahl
Standard: 0
|
Animation.Easing |
Die auf die Animation angewendete Easing-Funktion. Folgende Optionen sind verfügbar:
Typ: String
Standardeinstellung: „linear“
|
Animation.Start |
Bestimmt, ob das Diagramm bei der ersten Zeichnung animiert wird. Bei Typ: Boolesch
Standardeinstellung false
|
Ereignisse
Beim Zeichnen eines Diagramms wird das Ereignis „ready“ ausgelöst, sobald das Diagramm für externe Methodenaufrufe bereit ist.
Im Diagramm wird das Ereignis animationfinish
ausgelöst, wenn die Umstellung abgeschlossen ist.
Name | |
---|---|
animationfinish |
Wird ausgelöst, wenn die Umstellungsanimation beendet ist. Eigenschaften:Keine
|
Beispiele
Wertänderungen
// Some raw data (not necessarily accurate) var rowData1 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea', 'Rwanda', 'Average'], ['2004/05', 165, 938, 522, 998, 450, 114.6], ['2005/06', 135, 1120, 599, 1268, 288, 382], ['2006/07', 157, 1167, 587, 807, 397, 623], ['2007/08', 139, 1110, 615, 968, 215, 409.4], ['2008/09', 136, 691, 629, 1026, 366, 569.6]]; var rowData2 = [['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua Guinea', 'Rwanda', 'Average'], ['2004/05', 122, 638, 722, 998, 450, 614.6], ['2005/06', 100, 1120, 899, 1268, 288, 682], ['2006/07', 183, 167, 487, 207, 397, 623], ['2007/08', 200, 510, 315, 1068, 215, 609.4], ['2008/09', 123, 491, 829, 826, 366, 569.6]]; // Create and populate the data tables. var data = []; data[0] = google.visualization.arrayToDataTable(rowData1); data[1] = google.visualization.arrayToDataTable(rowData2); var options = { width: 400, height: 240, vAxis: {title: "Cups"}, hAxis: {title: "Month"}, seriesType: "bars", series: {5: {type: "line"}}, animation:{ duration: 1000, easing: 'out' }, }; var current = 0; // Create and draw the visualization. var chart = new google.visualization.ComboChart(document.getElementById('visualization')); var button = document.getElementById('b1'); function drawChart() { // Disabling the button while the chart is drawing. button.disabled = true; google.visualization.events.addListener(chart, 'ready', function() { button.disabled = false; button.value = 'Switch to ' + (current ? 'Tea' : 'Coffee'); }); options['title'] = 'Monthly ' + (current ? 'Coffee' : 'Tea') + ' Production by Country'; chart.draw(data[current], options); } drawChart(); button.onclick = function() { current = 1 - current; drawChart(); }
Zeilen hinzufügen und entfernen
var options = { width: 400, height: 240, vAxis: {minValue:0, maxValue:100}, animation: { duration: 1000, easing: 'in' } }; var chart = new google.visualization.LineChart( document.getElementById('visualization')); var data = new google.visualization.DataTable(); data.addColumn('string', 'x'); data.addColumn('number', 'y'); data.addRow(['100', 123]); data.addRow(['700', 17]); var button = document.getElementById('b1'); function drawChart() { // Disabling the button while the chart is drawing. button.disabled = true; google.visualization.events.addListener(chart, 'ready', function() { button.disabled = false; }); chart.draw(data, options); } button.onclick = function() { if (data.getNumberOfRows() > 5) { data.removeRow(Math.floor(Math.random() * data.getNumberOfRows())); } // Generating a random x, y pair and inserting it so rows are sorted. var x = Math.floor(Math.random() * 1000); var y = Math.floor(Math.random() * 100); var where = 0; while (where < data.getNumberOfRows() && parseInt(data.getValue(where, 0)) < x) { where++; } data.insertRows(where, [[x.toString(), y]]); drawChart(); } drawChart();
Spalten hinzufügen und entfernen
var options = { width: 400, height: 240, vAxis: {minValue:0, maxValue:1000}, animation: { duration: 1000, easing: 'out' } }; var chart = new google.visualization.ColumnChart( document.getElementById('visualization')); var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'; var data = new google.visualization.DataTable(); data.addColumn('string', 'x'); data.addColumn('number', 'A'); data.addColumn('number', 'B'); data.addRow(['A', 123, 40]); data.addRow(['B', 17, 20]); var addButton = document.getElementById('b1'); var removeButton = document.getElementById('b2'); function drawChart() { // Disabling the buttons while the chart is drawing. addButton.disabled = true; removeButton.disabled = true; google.visualization.events.addListener(chart, 'ready', function() { // Enabling only relevant buttons. addButton.disabled = (data.getNumberOfColumns() - 1) >= chars.length; removeButton.disabled = (data.getNumberOfColumns() - 1) < 2; }); chart.draw(data, options); } function shuffleAndDrawChart() { for (var i = 0; i < data.getNumberOfRows(); ++i) { for (var j = 1; j < data.getNumberOfColumns(); ++j) { var num = Math.floor(Math.random() * 1000); data.setValue(i, j, num); } } drawChart(); } addButton.onclick = function() { data.addColumn('number', chars[data.getNumberOfColumns() - 1]); shuffleAndDrawChart(); } removeButton.onclick = function() { data.removeColumn(data.getNumberOfColumns() - 1); shuffleAndDrawChart(); } drawChart();
Ansichtsfenster ändern
var options = { width: 400, height: 240, animation: { duration: 1000, easing: 'in' }, hAxis: {viewWindow: {min:0, max:5}} }; var chart = new google.visualization.SteppedAreaChart( document.getElementById('visualization')); var data = new google.visualization.DataTable(); data.addColumn('string', 'x'); data.addColumn('number', 'y'); var MAX = 10; for (var i = 0; i < MAX; ++i) { data.addRow([i.toString(), Math.floor(Math.random() * 100)]); } var prevButton = document.getElementById('b1'); var nextButton = document.getElementById('b2'); var changeZoomButton = document.getElementById('b3'); function drawChart() { // Disabling the button while the chart is drawing. prevButton.disabled = true; nextButton.disabled = true; changeZoomButton.disabled = true; google.visualization.events.addListener(chart, 'ready', function() { prevButton.disabled = options.hAxis.viewWindow.min <= 0; nextButton.disabled = options.hAxis.viewWindow.max >= MAX; changeZoomButton.disabled = false; }); chart.draw(data, options); } prevButton.onclick = function() { options.hAxis.viewWindow.min -= 1; options.hAxis.viewWindow.max -= 1; drawChart(); } nextButton.onclick = function() { options.hAxis.viewWindow.min += 1; options.hAxis.viewWindow.max += 1; drawChart(); } var zoomed = false; changeZoomButton.onclick = function() { if (zoomed) { options.hAxis.viewWindow.min = 0; options.hAxis.viewWindow.max = 5; } else { options.hAxis.viewWindow.min = 0; options.hAxis.viewWindow.max = MAX; } zoomed = !zoomed; drawChart(); } drawChart();
Größe des Diagramms ändern
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart () { function genData () { var array = []; for (var i = 0; i < 10; i++) { var x = i, y = Math.floor(Math.random() * 50), z = Math.floor(Math.random() * 25); array.push([x, y, z]); } return array; } function doubleIt() { options.chartArea.height = '100%'; options.chartArea.width = '100%'; } function halveIt() { options.chartArea.height = '50%'; options.chartArea.width = '50%'; } function goTo50() { options.chartArea.left = '50%'; options.chartArea.top = '50%'; } function goTo10() { options.chartArea.left = '10%'; options.chartArea.top = '10%'; } var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addColumn('number', 'Z'); data.addRows(genData()); var options = { height: 500, chartArea: { height: '50%', width: '50%', top: '10%', left: '10%' }, colors: ['#ee8100', '#9575cd'], animation: { duration: 1500, easing: 'linear', startup: true }, vAxis: { ticks: [10, 20, 30, 40, 50, 60], gridlines: {color: '#ccc'} }, hAxis: { ticks: [0, 4, 8, 12], gridlines: {color: '#ccc'} }, legend: {position: 'none'}, enableInteractivity: false }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); var btns = document.querySelector('#btns'); btns.onclick = function (e) { switch(e.target.id) { case "size": options.chartArea.height === '50%' ? doubleIt() : halveIt(); break; case "slide": options.chartArea.left === '10%' ? goTo50() : goTo10(); } chart.draw(data, options); } }