JavaScript-Kreisdiagrammbeispiel

var canvas = document.getElementById("mycanvas");
var w = Fenster.innereBreite;
var h = Fenster.innereHöhe;
Leinwandhöhe = 1000;
Leinwandbreite = 1400;
var ctx = canvas.getContext('2d');

var poppable = true;

var Scheiben = [];

Funktion ShadeColor(Farbe, Prozent) {
 var f = parseInt(color.slice(1), 16),
  t = Prozent < 0 ? 0 : 255,
  p = Prozent < 0 ? Prozent * -1 : Prozent,
  R = f >> 16,
  G = f >> 8 & 0x00FF,
  B = f & 0x0000FF;
 gibt "#" zurück + (0x1000000 + (Math.round((t - R) * p) + R) * 0x10000 + (Math.round((t - G) * p) + G) * 0x100 + (Math.round((t - B) * p) + B)).toString(16).slice(1);
}

Funktion pieSlice(oX, oY, r, pos, len, col, data) {
 this.data = Daten
 dies.originX = oX;
 dies.originY = oY;
 dieser.radius = r;
 dies.startingRadian = pos;
 diese.Länge = Länge;
 diese.Farbe = Spalte;
 diese.hervorgehobeneFarbe = FarbtonFarbe(diese.Farbe, .6);
 dies.hervorgehoben = falsch;
 dies.popped = falsch;
 dieses.animationFrame = 0;

 Funktion setzeFarbe(c) {
  diese.farbe = c;
 }
}

pieSlice.prototype.displayData = Funktion(){
 ctx.fillStyle = diese.Farbe;
 ctx.fillRect(dieser.originX – dieser.radius – 40, dieser.originY – dieser.radius – 35, 25, 25);
 ctx.fillStyle = "weiß";
 ctx.font = "15px Arial";
 ctx.fillText(diese.Daten, dieser.UrsprungX – dieser.Radius – 10, dieser.UrsprungY – dieser.Radius – 18);
}

pieSlice.prototype.render = Funktion() {
 wenn (!this.highlighted) {
  ctx.fillStyle = diese.Farbe;
  ctx.strokeStyle = diese.Farbe;
 } anders {
  wenn (!this.popped && poppable) {
   dies.displayData();
  }
  // ctx.fillStyle = diese.Farbe;
  ctx.fillStyle = diese.hervorgehobeneFarbe;
  ctx.strokeStyle = diese.Farbe;
 }
 ctx.beginPath();
 var xOffset = Math.cos(diese.Länge / 2 + dieses.Startradian) * dieses.AnimationsFrame;
 var yOffset = Math.sin(diese.Länge / 2 + dieses.Startradian) * dieses.AnimationsFrame;
 ctx.moveTo(dieser.UrsprungX + xOffset, dieser.UrsprungY + yOffset);
 var x = dieser.originX + xOffset + dieser.radius * Math.cos(dieser.startingRadian);
 var y = this.originY + yOffset + this.radius * Math.sin(this.startingRadian);
 ctx.lineTo(x, y);
 ctx.arc(dieser.UrsprungX + xOffset, dieser.UrsprungY + yOffset, dieser.Radius, dieser.Startradian, dieser.Startradian + diese.Länge);
 wenn (dies.gepoppt) {
  var füllen = ctx.fillStyle;
  dies.displayData();
  ctx.fillStyle = füllen;
  wenn (dieses.animationFrame < 30) {
   dies.animationFrame += 2;
  }
 } anders {
  wenn (dieses.animationFrame > 0) {
   dies.animationFrame -= 2;
  }
 }
 ctx.closePath();
 //ctx.stroke();
 //wenn (dies.hervorgehoben) {
 ctx.fill();
 // }
}

pieSlice.prototype.update = Funktion() {

}

Funktion Kreisdiagramm(e) {
 dies.slices = s;
}
pieChart.prototype.render = Funktion() {
 dies.slices.forEach(Funktion(p) {
  p.render();
 });
};

pieChart.prototype.update = Funktion() {
  dies.slices.forEach(Funktion(p) {
   p.update();
  });

 }
 //KUCHEN EINS
var pie = neues pieSlice(700, 170, 125, 0, Math.PI / 4, "#FFD1DC", 12);
var slice2 = neues pieSlice(700, 170, 125, Math.PI / 4, Math.PI / 4, "#08E8DE");
var slice3 = neues pieSlice(700, 170, 125, Math.PI / 2, Math.PI / 4, "#6699CC");
var slice4 = neues pieSlice(700, 170, 125, 3 * Math.PI / 4, Math.PI, "#ADD8E6");
var slice5 = neues pieSlice(700, 170, 125, 7 * Math.PI / 4, Math.PI / 4, "#B19CD9");
var slices1 = [Kuchen, Slice2, Slice3, Slice4, Slice5];

var pink = neues Kreisstück (220, 170, 125, 0, Math.PI / 3, "#FF4B4B");
var orange = neues Kreissegment (220, 170, 125, Math.PI / 3, Math.PI / 3, "#FF931B");
var gelb = neues Kreissegment (220, 170, 125, 2 * Math.PI / 3, Math.PI / 3, "#FFE21B");
var grün = neues Kreissegment (220, 170, 125, 3 * Math.PI / 3, Math.PI / 3, "#90E64E");
var blau = neues Kreissegment (220, 170, 125, 4 * Math.PI / 3, Math.PI / 3, "#6097D9");
var purple = neues Kreissegment (220, 170, 125, 5 * Math.PI / 3, Math.PI / 3, "#8365DD");

var redd = neues PieSlice(1180, 170, 125, 0, 2 * Math.PI / 3, "#B3989B");
var orangee = neues Kreissegment (1180, 170, 125, 2 * Math.PI / 3, 1 * Math.PI / 8, "#C1AEE0");
var bluee = neues PieSlice(1180, 170, 125, 19 * Math.PI / 24, 4 * Math.PI / 24, "#928CE9");
var greenn = neues Kreissegment (1180, 170, 125, 23 * Math.PI/24, 3 * Math.PI/8, "#676675");
var purplee = neues Kreissegment (1180, 170, 125, 4 * Math.PI/3, 3 * Math.PI/8, "#947D59");
var ceci = neues PieSlice(1180, 170, 125, 41 * Math.PI/24, 7*Math.PI/24, "#D994E0");

var slices3 = [rot, orange, blau, grün, lila, hellbraun];

var slices2 = [rosa, orange, gelb, grün, blau, lila];
var pie1 = neues Kreisdiagramm (Slices1);
var pie2 = neues Kreisdiagramm (Slices2);
var pie3 = neues Kreisdiagramm (Slices3);
var update = funktion() {
 pie1.update();
}
var render = Funktion() {
 ctx.clearRect(0, 0, Leinwandbreite, Leinwandhöhe);
 pie1.render();
 pie2.render();
 pie3.render();
}

var Schritt = Funktion() {
 aktualisieren();
 machen();
 animieren (Schritt);
}

var animate = window.requestAnimationFrame ||
 Fenster.webkitRequestAnimationFrame ||
 window.mozRequestAnimationFrame ||
 Funktion(Rückruf) {
  window.setTimeout(Rückruf, 1000 / 60);
 };

Scheiben.push.apply(Scheiben, Scheiben1);
Scheiben.drücken.anwenden(Scheiben, Scheiben2);
Scheiben.drücken.anwenden(Scheiben, Scheiben3);

canvas.addEventListener("Mausbewegung", Funktion(e) {
 var x = e.clientX;
 var y = e.clientY;
 slices.forEach(Funktion(slice) {
  ctx.beginPath();
  var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  ctx.moveTo(slice.originX + xOffset, slice.originY + yOffset);
  var xx = slice.originX + xOffset + slice.radius * Math.cos(slice.startingRadian);
  var yy = slice.originY + yOffset + slice.radius * Math.sin(slice.startingRadian);
  ctx.lineTo(xx, yy);
  ctx.arc(slice.originX + xOffset, slice.originY + yOffset, slice.radius, slice.startingRadian, slice.startingRadian + slice.length);
  wenn (ctx.isPointInPath(x, y)) {
   scheibe.hervorgehoben = wahr;
   slice.displayData();
  } anders {
   scheibe.hervorgehoben = falsch;
  }
  ctx.closePath();

 });
});

canvas.addEventListener("klicken", Funktion(e) {
 var x = e.clientX;
 var y = e.clientY;
 slices.forEach(Funktion(slice) {
  ctx.beginPath();
  var xOffset = Math.cos(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  var yOffset = Math.sin(slice.length / 2 + slice.startingRadian) * slice.animationFrame;
  ctx.moveTo(slice.originX + xOffset, slice.originY + yOffset);
  var xx = slice.originX + xOffset + slice.radius * Math.cos(slice.startingRadian);
  var yy = slice.originY + yOffset + slice.radius * Math.sin(slice.startingRadian);
  ctx.lineTo(xx, yy);
  ctx.arc(slice.originX + xOffset, slice.originY + yOffset, slice.radius, slice.startingRadian, slice.startingRadian + slice.length);
  wenn (ctx.isPointInPath(x, y)) {
   wenn (slice.popped) {
    Scheibe.gepoppt = falsch;
    aufklappbar = wahr;
   } anders {
    wenn(aufklappbar){
      Scheibe.gepoppt = wahr;
     aufklappbar = falsch;
    }
   }
   scheibe.hervorgehoben = falsch;
  }
  ctx.closePath();

 });
});

//Starte die Schleife
animieren (Schritt);

<canvas id="mycanvas"></canvas>