jquery - sankey - haxis google chart
Animar el gráfico circular con Google Visualization (3)
Creo que la función no es compatible con la API de Google api - consulte Modificaciones compatibles
Creo que puede ser más fácil si usa una herramienta de gráfico diferente como esta http://bl.ocks.org/mbostock/1346410
Estoy experimentando con Google charts. Quiero un gráfico circular para animar de 0% a 75% (ver la imagen a continuación). Estoy intentando lograr esto a través de tablas de Google. Estoy creando dos conjuntos de datos, uno comenzará al 99% y el otro al 1%. Quiero invertir y animar estos. He logrado cambiar los valores a través de la animación, pero no logro encontrar la manera de animarlos.
<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>
<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>
Resolviendo el problema original con el pulcro ciclo de animación de @Muhammad.
Valores iniciales:
- Trabajo: 0%
- Comer: 100%
El ciclo aumenta el valor de 1 unidad y dibuja el gráfico cada 30 milisegundos.
El ciclo se detiene cuando se alcanza Work = 75%.
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, 0.0);
data.setValue(1, 0, ''Eat'');
data.setValue(1, 1, 100.0);
var options = {
width:500,
height:500
};
var chart = new google.visualization.PieChart(document.getElementById(''chart_div''));
chart.draw(data, options);
// initial value
var percent = 0;
// start the animation loop
var handler = setInterval(function(){
// values increment
percent += 1;
// apply new values
data.setValue(0, 1, percent);
data.setValue(1, 1, 100 - percent);
// update the pie
chart.draw(data, options);
// check if we have reached the desired value
if (percent > 74)
// stop the loop
clearInterval(handler);
}, 30);
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="chart_div"></div>