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: 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.
Animation 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 diese Option in den Optionen festlegen, beginnt das Diagramm mit Reihenwerten, die an der Basis gezeichnet werden, und animiert sich in ihrem endgültigen Zustand. - 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 die Optionen. Bei verschiedenen Diagrammtypen werden unterschiedliche Änderungen unterstützt. Unter Unterstützte Änderungen erfahren Sie, welche Änderungen für welche Diagrammtypen unterstützt werden.
- Legen Sie das Übergangsverhalten mit der Option Animation fest.
- Rufen Sie
chart.draw()
in Ihrem Diagramm auf, um zu den neuen Werten überzugehen.
Hier ist ein einfaches Beispiel, bei dem der einzelne Wert in einem Balkendiagramm bei jedem Klick auf eine Schaltfläche geändert wird:
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 Arten von Übergängen variiert von Diagramm zu Diagramm. Es gibt folgende Arten von Übergängen:
- Nur Änderungen an Datentabellenwerten. Die Anzahl der Zeilen und Spalten ist gleich und die Spalten behalten ihre ursprünglichen Typen und Rollen.
- Spalten (Reihen) hinzufügen oder entfernen
- Hinzufügen oder Entfernen von Zeilen (Kategorien)
-
Änderungen an den Diagrammoptionen. Derzeit werden die folgenden Optionen bei einer Änderung animiert:
-
Ansichtsfenster (
vAxis.viewWindow.min
,vAxis.viewWindow.max
,hAxis.viewWindow.min
,hAxis.viewWindow.max
): Das Ändern des Ansichtsfensters ist nützlich, um Zoomeffekte 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
)
-
Ansichtsfenster (
Änderungstyp | Gültige Diagrammtypen |
---|---|
Wertänderungen | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, Gauge |
Zeilen hinzufügen/entfernen | ScatterChart, LineChart, AreaChart, BubbleChart, ComboChart (nur mit Linien-/Flächendiagramm) |
Spalten hinzufügen/entfernen | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart |
Diagrammoptionen ändern | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart |
Verhalten bei der Umstellung
Name | |
---|---|
animation.duration |
Die Dauer der Animation in Millisekunden. Weitere Informationen finden Sie in der Dokumentation zu Animationen. Typ:Zahl
Standard: 0
|
animation.easing |
Die auf die Animation angewendete Easing-Funktion. Folgende Optionen sind verfügbar:
Typ: String
Standardeinstellung: „linear“
|
animation.startup |
Bestimmt, ob das Diagramm bei der ersten Zeichnung animiert wird. Bei Typ: Boolesch
Standard falsch
|
Ereignisse
Beim Zeichnen eines Diagramms wird ein "ready"-Ereignis ausgelöst, sobald das Diagramm für externe Methodenaufrufe bereit ist.
Das Diagramm löst das animationfinish
-Ereignis aus, wenn der Übergang abgeschlossen ist.
Name | |
---|---|
animationfinish |
Wird ausgelöst, wenn die Übergangsanimation abgeschlossen ist. Properties: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();
Diagrammgröße ä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); } }