En esta página, se describe cómo animar las modificaciones realizadas en un gráfico, en lugar de aplicarlas al instante.
Contenido
Descripción general
Los gráficos de Google pueden animarse sin problemas de dos maneras: al inicio, cuando dibujas el gráfico por primera vez o cuando vuelves a dibujarlo después de realizar un cambio en los datos o las opciones.
Para animar al inicio, haz lo siguiente:
- Establece los datos y las opciones del gráfico. Asegúrate de configurar la duración y el tipo de aceleración de la animación.
-
Establece
animation: {"startup": true}
: Si configuras esto en tus opciones, el gráfico comenzará con valores de serie dibujados en el modelo de referencia y se animará a su estado final. - Llama a
chart.draw()
y pasa tus datos y opciones.
Para animar una transición, haz lo siguiente:
- Comienza con un gráfico ya renderizado.
- Modifica la tabla o las opciones de datos. Los diferentes tipos de gráficos admiten modificaciones diferentes. Consulta Modificaciones admitidas para obtener información sobre las modificaciones compatibles con los tipos de gráficos.
- Especifica el comportamiento de la transición con la opción de animación.
- Llama a
chart.draw()
en tu gráfico para realizar la transición a los valores nuevos.
A continuación, te mostramos un ejemplo simple que cambia el valor único presentado en un gráfico de barras con cada clic en un botón:
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(); }
Modificaciones admitidas
La compatibilidad con diferentes tipos de transiciones difiere de un gráfico a otro. Los diferentes tipos de transiciones son los siguientes:
- Solo cambios en los valores de la tabla de datos. La cantidad de filas y columnas es la misma, y las columnas mantienen sus tipos y funciones originales.
- Adición o eliminación de columnas (serie).
- Adición o eliminación de filas (categorías).
-
Cambios en las opciones del gráfico. Actualmente, las opciones que se animarán con los cambios incluyen las siguientes:
-
la ventana de vista (
vAxis.viewWindow.min
,vAxis.viewWindow.max
,hAxis.viewWindow.min
,hAxis.viewWindow.max
): Cambiar la ventana de vista resulta útil para lograr efectos de "zoom" y de "desvío" continuos (consulta los ejemplos a continuación) -
Valores
vAxis.ticks
yhAxis.ticks
vAxis.gridlines.count
yhAxis.gridlines.count
vAxis.direction
yhAxis.direction
vAxis.baseline
yhAxis.baseline
vAxis.logScale
yhAxis.logScale
- tamaño del gráfico (
height
ywidth
) -
área del gráfico (
chartArea.height
,chartArea.width
,chartArea.top
,chartArea.left
)
-
la ventana de vista (
Tipo de modificación | Tipos de gráficos válidos |
---|---|
Cambios en los valores | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, Gauge |
Agregar o quitar filas | Diagrama de dispersión, Gráfico de líneas, Gráfico de áreas, Gráfico de burbujas y Gráfico combinado (solo con serie de líneas/áreas) |
Agregar o quitar columnas | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart |
Modificando las opciones del gráfico | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart |
Comportamiento de la transición
Nombre | |
---|---|
animation.duration |
Es la duración de la animación en milisegundos. Para obtener más detalles, consulta la documentación sobre animaciones. Tipo: Número
Valor predeterminado: 0
|
animation.easing |
Es la función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:
Tipo: string
Predeterminado: "lineal"
|
animation.startup |
Determina si se animará el gráfico en el dibujo inicial. Si es Tipo: booleano
Predeterminado falso
|
Eventos
Cuando se dibuja un gráfico, se activa un evento "listo" una vez que el gráfico está listo para llamadas de método externas.
El gráfico activará el evento animationfinish
cuando se complete la transición.
Nombre | |
---|---|
animationfinish |
Se activa cuando se completa la animación de transición. Propiedades: ninguna
|
Ejemplos
Cambios en los valores
// 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(); }
Cómo agregar y quitar filas
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();
Cómo agregar y quitar columnas
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();
Cómo cambiar la ventana de vista
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();
Cómo cambiar el tamaño del gráfico
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); } }