En esta página, se describe cómo animar las modificaciones realizadas en un gráfico en lugar de aplicarlas instantáneamente.
Contenido
Descripción general
Los gráficos de Google se pueden animar sin problemas en una de dos maneras, ya sea al iniciar el gráfico o al volver a dibujarlo después de realizar un cambio en los datos o en las opciones.
Para animar durante el inicio:
- Establezca los datos y las opciones de su gráfico. Asegúrate de establecer la duración de la animación y el tipo de aceleración.
-
Si estableces
animation: {"startup": true}
, puedes establecer esto en las opciones para que el gráfico comience con valores de serie dibujados en el modelo de referencia y se anime a su estado final. - Llama a
chart.draw()
y pasa tus datos y opciones.
Para animar una transición, haz lo siguiente:
- Comience con un gráfico ya procesado.
- Modifique las opciones o la tabla de datos. Los distintos tipos de gráficos admiten distintas modificaciones. Consulta Modificaciones admitidas para obtener información sobre qué modificaciones se admiten en cada tipo de gráfico.
- Especifica el comportamiento de transición con la opción animation.
- Llama a
chart.draw()
en tu gráfico para pasar a los valores nuevos.
A continuación, se incluye un ejemplo simple que cambia el valor único que se muestra en un gráfico de barras cada vez que se hace 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 compatibles
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 (series).
- Adición o eliminación de filas (categorías).
-
Cambios en las opciones del gráfico. Actualmente, estas son las opciones que se animarán ante los cambios:
-
la ventana de vista (
vAxis.viewWindow.min
,vAxis.viewWindow.max
,hAxis.viewWindow.min
,hAxis.viewWindow.max
): Cambiar la ventana de vistas es útil para lograr efectos de "zoom" y "desvío" continuos (consulta los siguientes ejemplos). -
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 el valor | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, Gauge |
Agregar o quitar filas | ScatterChart, LineChart, AreaChart, BubbleChart, ComboChart (solo para series de líneas o áreas) |
Agregar o quitar columnas | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart |
Modifica las opciones de los gráficos | ScatterChart, LineChart, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart |
Comportamiento de la transición
Nombre | |
---|---|
animación.duración |
Es la duración en milisegundos de la animación. Para obtener más detalles, consulta la documentación sobre animaciones. Tipo: número
Valor predeterminado: 0
|
Animación |
La función de aceleración aplicada a la animación. Están disponibles las siguientes opciones:
Tipo: string
Predeterminado: "lineal"
|
animación.inicio |
Determina si el gráfico se animará en el sorteo inicial. Si es Tipo: booleano
Predeterminado: false
|
Eventos
Cuando dibujas un gráfico, se activa un evento "listo" una vez que el gráfico está listo para las llamadas a métodos externos.
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 de valor
// 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 vistas
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); } }