[Javascript] Canvas Diagram
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
ausgeben
beispiel
beschriftung
code
dank
farbe
index
jeweiligen felder
mitte
plan
projekt
quellcode
realisieren
sagen
schrift
sinn
summe
teil
url
verzweigung
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage