Wie wir schon im Artikel Säulendiagramme mit Canvas gesehen haben, eignet sich HTML5 vorzüglich, um Daten zu visualisieren.
Nicht immer ist jedoch ein Säulendiagramm die beste Wahl; deswegen möchten wir in diesem Tutorial vorstellen, wie man ein dynamisches Tortendiagramm mit JavaScript und Canvas in HTML5 umsetzt.
Zum dynamischen Beispiel in Action
Der Code dazu:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selfHTML5 - Ein Tortendiagramm mit HTML5 und Canvas</title>
<meta name="description" content="Demo eines Tortendiagrammes mit HTML5 und Canvas" />
<link href="tortendiagramm.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script>
// Global definierte Variablen
var fps = 30; // frames per second
var animationSpeed = 150; // je kleiner, desto schneller
var radius = 100; // Radius der Torte in Pixeln
var werte = [50 , 110, 140, 60, 90]; //
var beschriftung = ["Dell", "HP", "Apple", "Acer", "LG"];
var colors = ["#bed6c7","#adc0b4","#8a7e66","#a79b83","#bbb2a1"]
// Deklarationen
var wdh = 0; // Animationsdurchläufe
var total = 0;
var i = 0; // Zählvariable der Tortenstücke
var scale = 0;
var startwinkel = 0;
var endwinkel = 0;
function initPie() {
context = document.getElementById("canvasElement").getContext('2d');
// Summe aller Werte berechnen
for (var z=0; z < werte.length; z++) {
total += werte [z];
}
//startAnimation();
startAnimation();
}
function drawPie () {
// einen neuen Pfad initialisieren
context.beginPath();
// Startposition festlegen
context.moveTo(300, 150);
// Summe bisher gezeichneter Segmente
summe = 0;
for (var j=0; j <= i; j++) {
summe += werte [j];
}
startwinkel = toRad((summe - werte[i]) / total * 360);
endwinkel = toRad(summe / total * 360);
aktuellerwinkel = startwinkel + (endwinkel - startwinkel) * scale;
context.arc(300, 150, 100, startwinkel, aktuellerwinkel, false);
context.closePath();
context.fillStyle = colors[i];
context.fill();
}
function looptime () {
wdh++;
scale = wdh / animationSpeed * total / werte[i];
// Ende?
if(scale >= 1) {
drawPie(); // Animation ein letztes Mal durchführen
scale = 0; // Am Ende zurücksetzen
wdh = 0;
clearInterval(timer); // Schleife abbrechen
showLegend(); // Legende anzeigen
i++; // Segmentzähler hochzählen
// gibt es noch weitere Segmente zum Darstellen?
if (i < werte.length){
startAnimation ()
}
} else {
drawPie();
}
}
function startAnimation() {
timer = setInterval(looptime, 1000 / fps );
}
function showLegend () {
strCode = "<tr><td style='width: 25px; background-color:"+colors[i]+"'>
</td><td>"+beschriftung[i]+"</td><td> "+werte[i]+"</td></tr>";
document.getElementById('legende').innerHTML += strCode;
}
// Umrechung Grad -> Radiant
function toRad (x) {
return (x*Math.PI)/180;
}
</script>
<a href="http://www.selfhtml5.org" >selfHHTML5</a> | <a href=""
<h2>Beispiel: Umsatz großer Computerhersteller</h2>
<canvas id="canvasElement" width="500" height="500" style="float:left">
Ihre Browser ist nicht HTML5 tauglich.
</canvas>
<div style="padding: 50px" >
<table cellpadding="3" cellspacing="1" >
<tbody id="legende">
<tr>
<th>Farbe</th>
<th>Firma</th>
<th>Umsatz</th>
</tr>
</tbody>
</table>
</div>
<br />
<script>initPie()</script>
</body>
</html>
Hallo,
ich konnte das Diagramm gut in meine Seite einbauen, nun möchte ich jedoch noch weitere Diagramme auf der seite haben…
Meine Idee war einfach, dass ich das script umbenne zu „initPie2()“ und es dann gehne müsste, aber so recht will das nicht klappen :/
Hättest du ggf. einen Tipp?