Animazione del grafico a torta con Google Visualization

Sto sperimentando con Google Maps. Voglio un grafico a torta per animare dallo 0% al 75% (vedi l'immagine sotto). Sto cercando di raggiungere questo obiettivo tramite google charts. Sto creando due serie di dati, uno inizierà al 99%, l'altro all'1%. Voglio invertire e animare questi. Ho raggiunto la modifica dei valori tramite l'animazione, ma non riesco a capire come farli animare.Animazione del grafico a torta con Google Visualization

<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>

chart

fonte

2013-06-21 TechyDude

si vuole andare blu/rosso/blu/rosso ... e così via, come la prima iterazione? – Fabi

Idealmente sarebbe prima il bianco, poi il colore si animerebbe come una lancetta dell'orologio alla percentuale desiderata. – TechyDude

La funzione 'aniChart' è errata. Stai eseguendo il ciclo di tutti i valori e quindi esegui una chiamata finale di estrazione ritardata. Non esiste un ciclo di animazione. L'esempio del grafico – daVe

credo che la funzione non è supportata da Google Charts API - si riferiscono a Supported Modifications

Penso che possa essere più facile se si utilizza uno strumento grafico diverso come questo http://bl.ocks.org/mbostock/1346410

fonte

2013-06-26 17:08:28 Fabi

è eccellente. Si basa sulla libreria d3, che è anche eccellente. Richiede un browser che supporta SVG. Perfetto per le applicazioni mobili. È possibile animare, aggiungere eventi di tocco, modificare interattivamente le fette di torta con alcuni JS. – mbokil

<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>

fonte

2015-10-06 07:13:06

inserisci questo elemento nel tag body

e nel tag head –

Mentre questo codice può rispondere alla domanda, fornendo un contesto aggiuntivo riguardo * come * e/o * perché * risolve il problema migliorerebbe il valore a lungo termine della risposta. – Keale

Risoluzione del problema originale con il ciclo di animazione @Muhammad pulito.

valori iniziali:

lavoro: 0%
Eat: 100%

Il ciclo aumenta il valore di unità 1 e disegnare la torta ogni 30 millisecondi.

L'arresta si interrompe quando viene raggiunto il lavoro = 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>

fonte

2016-11-03 15:30:53 daVe

Animazione del grafico a torta con Google Visualization

risposta

Problemi correlati