kostenloser Webspace werbefrei: lima-city


[Javascript] Canvas Diagram

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    c143

    c143 hat kostenlosen Webspace.

    Hallo
    Ich würde gern ein dynamisches Diagram mit Javascript und einem Canvas realisieren. Das habe ich bereits gemacht, wie ihr an diesem Beispiel mit den Werten [40, 50, 60] sehen könnt.

    Ich würde jetzt noch gerne eine eine Beschriftung in der Mitte der jeweiligen Felder einfügen. Aber sobald der Teil zu klein wird, z.B. mit den Werten [500, 400, 2], soll die Schrift einfach wegfallen.

    Ich habe mal auskommentiert, was ich bisher hab. Sieht im Quellcode des verlinkten Beispiels aber sicher besser aus.

    <html>
    	<head>
    		<script>
    			window.onload = function(){
    			    canvas	= document.getElementById("canvas");
    			    context = canvas.getContext("2d");
    			    
    			    context.translate(canvas.width/2, canvas.height/2); //0 Punkt in die Mitte positionieren
    
    				numbers = [40, 50, 60]; //Array mit den Beispiel nummern
    				names = ['test11', 'test2', 'test3']; //Beispiel texte
    				
    				draw_diagram(); //Beim Seitenaufrum Diagram zichnen
    			}
    		
    		
    			function draw_diagram(){
    				context.save();
    				context.setTransform(1,0,0,1,0,0);
    				context.clearRect(0,0,context.canvas.width,context.canvas.height);
    				context.restore(); //Canvas immer clearen, weil das später Dynamisch wird.
    				
    				var total = 0;
    				var sum = 0;
    				
    				for(var i=0; i < numbers.length; i++){
    					total += numbers[i]; //Alle nummern zusammenzählen
    				}
    				for(var i=0; i < numbers.length; i++){
    					sum += numbers[i]; //Die momentane Summe
    					
    					startangle = toRad((sum - numbers[i]) / total * 360); //Den anfangswinkel mit den totalen und momentanen werten ausrechnen
    					endangle = toRad(sum  / total * 360); //und den endwinkel
    					
    					context.beginPath();
    						context.moveTo(0, 0);
    						context.arc(0,0,canvas.height/2 - 40, startangle, endangle, false);
    						//Und mit diesen Winkeln dann ein Teilkreis zeichnen
    						context.fillStyle = rainbow(numbers.length, i);
    						context.fill();
    					context.closePath();
    					
    					
    					//Mein Versuch eine Schrit einzublenden, scheiterte jedoch
    					/*context.beginPath();
    						context.save();
    							context.fillStyle = 'white';
    							context.font = "20px Arial";
    							context.rotate(startangle + (endangle - startangle)/2);
    							console.log(startangle + (endangle - startangle)/2);
    							context.fillText(names[i],30,0);
    						context.restore();
    					context.closePath();*/
    				}
    			}
    
    			function rainbow(numOfSteps, step) { //Regenbogen farben
    			    var r, g, b;
    			    var h = step / numOfSteps;
    			    var i = ~~(h * 6);
    			    var f = h * 6 - i;
    			    var q = 1 - f;
    			    switch(i % 6){
    			        case 0: r = 1, g = f, b = 0; break;
    			        case 1: r = q, g = 1, b = 0; break;
    			        case 2: r = 0, g = 1, b = f; break;
    			        case 3: r = 0, g = q, b = 1; break;
    			        case 4: r = f, g = 0, b = 1; break;
    			        case 5: r = 1, g = 0, b = q; break;
    			    }
    			    var c = "#" + ("00" + (~ ~(r * 255)).toString(16)).slice(-2) + ("00" + (~ ~(g * 255)).toString(16)).slice(-2) + ("00" + (~ ~(b * 255)).toString(16)).slice(-2);
    			    return (c);
    			}
    			
    			function toRad (x) {
    			  return (x * Math.PI) / 180;  
    			}
    		</script>
    	</head>
    	<body>
    		<canvas id="canvas" height="450px" width="520px"></canvas>
    	</body>
    </html>


    Danke und Gruss
    c143

    Beitrag zuletzt geändert: 11.2.2014 20:56:35 von c143
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. Du könntest ja einfach die Schrift nur dann ausgeben lassen, wenn der Wert einer Farbe größer ist als, sagen wir mal, 10% der Summe aller Werte.. also eine If-Verzweigung!

    Ich entschuldige mich schonmal im Vorraus, falls der Beitrag unqualifiziert war, hab nicht so den großen Plan von Javascript... =) Die Lösung kam mir einfach so in den Sinn... XP
  4. 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!