J'essaie d'expérimenter avec Google Graphiques. Je veux qu'un tableau de secours anime de 0% à 75% (voir l'image ci-dessous). Je tente d'y parvenir via Google Graphiques. Je crée deux ensembles de données, on commencera à 99%, l'autre à 1%. Je veux inverser et animer ceux-ci. J'ai réalisé de modifier les valeurs par animation, mais je ne peux pas comprendre comment les amener à animer.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'text');
data.addColumn('number', 'number');
data.addRows(2);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 1);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 99);
var options = {
width:500,
height:500,
animation: {duration: 1000, easing: 'out',}
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
function aniChart(d,o){
for (var i=1; i<100; i++) {
data.setValue(0, 1, i);
}
for (var i=99; i>00; i--) {
data.setValue(1, 1, i);
}
setTimeout(function(){
chart.draw(data, options);
}, 1000);
};
aniChart();
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
3 Réponses :
Je pense que la fonction n'est pas prise en charge par Google Tablets API - voir modifications prises en charge
Je pense qu'il est peut-être plus facile si vous utilisez un outil de graphique différent tel que ce http: // bl. oocks.org/mbostock/1346410
L'exemple du graphique est excellent. Il repose sur la bibliothèque D3 qui est aussi excellente. Il nécessite un navigateur qui prend en charge SVG. Parfait pour les applications mobiles. Vous pouvez animer, ajouter des événements tactiles, modifier les quartiers de tarte de manière interactive avec certains JS.
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
</head>
<body>
<div id="piechart" style="width: 900px; height: 500px;"></div>
<script>
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
};
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);
var counter = 0;
var handler = setInterval(function(){
counter = counter + 0.1
options = {
title: 'My Daily Activities',
slices: { 1: {offset: counter},
3: {offset: counter},
5: {offset: counter},
}
};
chart.draw(data, options);
if (counter > 0.3) clearInterval(handler);
}, 200);
}
</script>
</body>
Mettez cet élément dans la balise corporelle
Bien que ce code puisse répondre à la question, fournissant un contexte supplémentaire concernant comment et / ou pourquoi il résout le problème améliorerait la valeur à long terme de la réponse.
Résoudre le problème d'origine avec la boucle d'animation NEAT @Muhammad.
Valeurs initiales: P>
La boucle augmente la valeur 1 unité et dessinez la tarte tous les 30 millisecondes. P>
La boucle s'arrête lorsque le travail = 75% est atteint. P>
P >
<script type="text/javascript" src="https://www.google.com/jsapi"></script> <div id="chart_div"></div>
Vous voulez qu'il soit bleu / rouge / bleu / rouge ... et ainsi de suite comme la première itération?
Idéalement, ce serait blanc d'abord, puis la couleur animerait comme une main d'horloge au pourcentage souhaité.
anichaart fonction est faux. Vous vous emboîtez à travers toutes les valeurs, puis effectuez un dernier appel unique retardé. Il n'y a pas de boucle d'animation.