Tortendiagramm mit HTML5 und Canvas

canvas-tortendiagramm
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>

Dieser Beitrag wurde unter HTML5 abgelegt und mit , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

Eine Antwort auf Tortendiagramm mit HTML5 und Canvas

  1. rony sagt:

    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?

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *