Cette page explique comment animer les modifications apportées à un graphique au lieu de les appliquer instantanément.
Sommaire
Présentation
L'animation des graphiques Google peut s'effectuer de deux manières différentes : soit au démarrage lorsque vous les dessinez pour la première fois, soit lorsque vous redessinez un graphique après avoir modifié des données ou des options.
Pour créer une animation au démarrage, procédez comme suit:
- Définissez les données et options du graphique. Veillez à définir la durée de l'animation et le type de lissage de vitesse.
-
Définissez
animation: {"startup": true}. Si vous le définissez dans vos options, le graphique commencera avec des valeurs de série dessinées à la référence et s'animera jusqu'à leur état final. - Appelez
chart.draw()en transmettant vos données et vos options.
Pour animer une transition:
- Commencez avec un graphique déjà affiché.
- Modifiez le tableau de données ou les options. Les types de graphiques diffèrent d'un type de graphique à l'autre. Consultez la section Modifications acceptées pour en savoir plus sur les modifications compatibles avec chaque type de graphique.
- Spécifiez le comportement de la transition à l'aide de l'option animation.
- Appelez
chart.draw()sur votre graphique pour effectuer la transition vers les nouvelles valeurs.
Voici un exemple simple qui modifie la valeur unique présentée dans un graphique à barres à chaque clic sur un bouton:
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();
}
Modifications acceptées
La prise en charge des différents types de transitions diffère d'un graphique à l'autre. Les différents types de transitions sont les suivants:
- Modifications apportées aux valeurs des tables de données uniquement. Le nombre de lignes et de colonnes est le même, et les colonnes conservent leurs types et rôles d'origine.
- Ajout ou suppression de colonnes (série).
- Ajout ou suppression de lignes (catégories).
-
Modifications apportées aux options du graphique. Actuellement, les options qui s'animent en cas de modification sont les suivantes :
-
Fenêtre d'affichage (
vAxis.viewWindow.min,vAxis.viewWindow.max,hAxis.viewWindow.min,hAxis.viewWindow.max) : la modification de la fenêtre d'affichage est utile pour obtenir des effets de "zoom" et de "dérive" continus (voir les exemples ci-dessous). -
vAxis.tickset valeurshAxis.ticks vAxis.gridlines.countethAxis.gridlines.countvAxis.directionethAxis.directionvAxis.baselineethAxis.baselinevAxis.logScaleethAxis.logScale- Taille du graphique (
heightetwidth) -
zone de graphique (
chartArea.height,chartArea.width,chartArea.top,chartArea.left)
-
Fenêtre d'affichage (
| Type de modification | Types de graphiques valides |
|---|---|
| Changements de valeur | Graphique à nuage de points, graphique en courbes, AreaChart, BarChart, BubbleChart, ColumnChart, CandlestickChart, SteppedAreaChart, ComboChart, jauge |
| Ajouter/Supprimer des lignes | Graphique à nuage de points, graphique linéaire, graphique en aires, graphique à bulles, graphique combiné (pour les séries linéaires/de zones uniquement) |
| Ajouter/Supprimer des colonnes | Graphique à nuage de points, Graphique en courbes, Graphique à barres, Graphique à barres, Graphique à colonnes, Graphique en chandeliers japonais, Graphique en courbes, Graphique à barres, Graphique à barres, ComboChart |
| Modifier les options du graphique | Graphique à nuage de points, Graphique en courbes, Graphique à barres, Graphique à barres, Graphique à colonnes, Graphique en chandeliers japonais, Graphique en courbes, Graphique à barres, Graphique à barres, ComboChart |
Comportement de la transition
| Nom | |
|---|---|
| animation.duration |
Durée de l'animation, en millisecondes. Pour en savoir plus, consultez la documentation sur les animations. Type:nombre
Par défaut:0
|
| animation.easing |
Fonction de lissage de vitesse appliquée à l'animation. Les options suivantes sont disponibles :
Type:chaîne
Par défaut : "linear" (linéaire).
|
| animation.startup |
Détermine si le graphique doit s'animer lors du dessin initial. Si la valeur est Type:booléen
Valeur par défaut "false"
|
Événements
Lorsque vous dessinez un graphique, un événement "ready" est déclenché dès que le graphique est prêt à recevoir des appels de méthode externe.
Le graphique déclenche l'événement animationfinish une fois la transition terminée.
| Nom | |
|---|---|
animationfinish |
Déclenché lorsque l'animation de transition est terminée. Propriétés:aucune
|
Exemples
Changements de valeur
// 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();
}
Ajouter et supprimer des lignes
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();
Ajouter et supprimer des colonnes
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();
Modifier la fenêtre d'affichage
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();
Modifier la taille d'un graphique
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);
}
}