kostenloser Webspace werbefrei: lima-city

Javascript Canvas Kreisdiagramm

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   c143

   c143 hat kostenlosen Webspace.

   20:36, 13.10.2013

   Hallo,
   ich würde gerne einen Array als Kreisdiagram anzeigen:
   
   

   function draw(){
   	var testArray = [10, 7, 22, 1]; //Array der dargestellt werden soll
   	var sum = 0; //Die Summe aller Einträge um den Prozentualen Anteil auszurechnen.
   	var sum2 = 0; //Eine zweite Summe um den aktuellen Stand zwischengespeichert zu haben.
   	
   	for(var i=0; i < testArray.length; i++){
   		sum += testArray[i]; //Alle zahlen werden zur Summe dazuaddiert.
   	}
   	for(var i=0; i < testArray.length; i++){
   		sum2 += testArray[i]; //Die aktuelle Summe
   		
   		startangle = toRad((sum - multiplied_array[i][1]) / total * 360);
   		endangle = toRad(sum  / total * 360);
   		
   		context.beginPath();
   		context.moveTo(0, 0); //Zeichnet Teilkreis nicht richtig ohne moveTo
   		context.arc(0,0,canvas.height/2 - 40, startangle, endangle, false);
   		context.fillStyle = rainbow(multiplied_array.length, i);
   		context.fill();
   		context.closePath();
   	}
   }
   
   window.onload = function(){
       canvas = document.getElementById("canvas");
       context = canvas.getContext("2d");
   }

   
   
   Ich hoffe jemand kann mir helfen und hat vielleicht auch eine bessere Lösung. Bei mir kommt das nämlich nicht wie gewünscht raus.
   Danke
   
   EDIT: Der HTML Canvas, dachte das wäre klar:
   

   <canvas id="canvas" height="450px" width="520px"></canvas>

   
   
   EDIT: Fehler gefunden. Durch mein mehrmaliges translate wurde immer nur das erste gezeichnet und nie die anderen 3 Schritte. Thema erledigt.
   
   Beitrag zuletzt geändert: 13.10.2013 23:29:08 von c143

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. kgreen

   

   kgreen hat kostenlosen Webspace.

   21:19, 13.10.2013

   Bei mir kommt da leider gar nichts.
   Eventuell habe ich auch etwas vergessen zu kopieren.
   
   Aber vielleicht kommst du damit besser zurecht:
   http://www.selfhtml5.org/canvas/tortendiagramm
4. Autor dieses Themas

   c143

   c143 hat kostenlosen Webspace.

   21:32, 13.10.2013

   kgreen schrieb:
   Bei mir kommt da leider gar nichts.
   Eventuell habe ich auch etwas vergessen zu kopieren.
   
   Aber vielleicht kommst du damit besser zurecht:
   http://www.selfhtml5.org/canvas/tortendiagramm

   
   
   Das ist auch nur die Javascript funktion, der canvas fehlt natürlich noch. Habs im ersten post unten hinzugefügt.
   Den Link schau ich mir mal an, danke.
   
   EDIT: Fehler gefunden. Durch mein mehrmaliges translate wurde immer nur das erste gezeichnet und nie die anderen 3 Schritte. Thema erledigt.
   
   Beitrag zuletzt geändert: 13.10.2013 21:53:39 von c143

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?