2012-04-01 9 views
2

I Raphael js Kreisdiagramm Pluginraphaeljs pie dynamischen Wert Array ändern

http://raphaeljs.com/pie.html

Ich brauche die Diagrammwerte Array in jedem 5 Sekunden zu aktualisieren (müssen den Kuchen neu zu zeichnen) - mein Problem ist folgendes Code erstellt auch ein neues Tortendiagramm, aktualisiert nicht nur das Vorhandene mit neuen Werten - kurz: ich kann nicht nur das "Wert" -Array passieren.

var labels = [], 
    values = [60,0], 
    i=60, 
    j=0 
window.setInterval(function(){ 
     i--; 
     j=j+1; 
     if(j>60){ 
      i=60; 
      j=0 
     } 

     values = [i,j]; 

     Raphael("holder", 700, 700).pieChart(350, 350, 250, values, labels, "#fff"); 

}, 5000); 

Ich muss nur mit neuen Werten den Kuchen aktualisieren, um auch keinen neuen zu schaffen.

Danke!

Antwort

3

Eine sinnvolle Vorgehensweise wäre, die Leinwand nur einmal zu initialisieren. Wenn Sie das Tortendiagramm neu zeichnen möchten, löschen Sie die Zeichenfläche (siehe Paper.clear() in den Dokumenten) und rufen Sie erneut pieChart auf demselben Zeichenflächenelement auf.

Beispiel: http://jsfiddle.net/5DRUh/

(function() { 

    var labels = ['value1', 'value2'], 
     values = [60, 0], 
     i = 60, 
     j = 0; 

    // Setup the canvas just once 
    paper = Raphael('holder', 700, 700); 

    window.setInterval(draw, 5000); 

    // Draw the piechart when the page loads 
    draw(); 

    function draw(){ 
     i--; 
     j = j + 1; 
     if (j > 60) { 
      i = 60; 
      j = 0; 
     } 

     values = [i, j]; 
     paper.clear(); 
     paper.pieChart(350, 350, 200, values, labels, '#fff'); 

    } 
}()); 
+0

Danke - das ist genau das, was ich brauche. –

+0

diese Geige funktioniert nicht – Sebas

+0

Das ist die Schönheit der Verknüpfung externer Dateien ... Ich habe die Geige aktualisiert. –

1

Eigentlich paper.clear() möglicherweise nicht genug sein, da es nicht für mich arbeiten.

Die Funktion piechart() verwendet ein Array von Werten als Eingabe, aber nach diesem Aufruf ist Ihr Array nicht mehr dasselbe.

Was ich getan habe war, einen Klon meines Arrays an die Methode piechart() übergeben, auf diese Weise meine Daten nicht durch piechart() -Funktion geplagt werden.

+1

Vielen Dank, ich verbrachte Stunden mit diesem Problem, ohne zu verstehen, warum dieser Mist nicht neu zeichnen würde ... – Sebas