kostenloser Webspace werbefrei: lima-city


Javascript Canvas Kreisdiagramm

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

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

    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?

Über lima-city

Login zum Webhosting ohne Werbung!