HTML5-Canvas-Kreisdiagramm

Ich bin versucht, zu erstellen eine einfache pie chart wie hier abgebildet, in der Grafik unten:

Die Tabelle zeigt die Ergebnisse für ein quiz, bei dem ein Benutzer kann wählen Sie entweder a, b oder c. Sie sind 10 Fragen, und der Benutzer kann wählen Sie nur eine option pro Frage.

Was ich will zu tun ist, zeigt das Kreisdiagramm mit jedem segment wird ein Prozentsatz von 100% durch die übergabe der Werte für entweder a,b oder c.

Habe ich Folgendes bisher:

JS:

var greenOne = "#95B524";
var greenTwo = "#AFCC4C";
var greenThree = "#C1DD54";

function CreatePieChart() {
  var chart = document.getElementById('piechart');
  var canvas = chart.getContext('2d');
  canvas.clearRect(0, 0, chart.width, chart.height);

  var total = 100;

  var a = 3;
  var b = 4;
  var c = 3;

  for (var i = 0; i < 3; i++) {
    canvas.fillStyle = "#95B524";
    canvas.beginPath();
    canvas.strokeStyle = "#fff";
    canvas.lineWidth = 3;
    canvas.arc(100, 100, 100, 0, Math.PI * 2, true);
    canvas.closePath();
    canvas.stroke();
    canvas.fill();
  }
}
CreatePieChart();

HTML:

<canvas id="piechart" width="200" height="200"></canvas>

Die Farben sind speziell auf die Größe des Segments, so grün ist der größte und grün drei für die kleinsten.

Dank

Ein wenig mehr Mühe könnte gehen einen langen Weg. Was ist dein problem genau?
Ich bin mir nicht sicher, wo Sie anfangen mit den Daten und Zeichnung der Karte

InformationsquelleAutor Cameron | 2011-08-09

canvas javascript

Sogar nach Google-Suche und dreifach-überprüfung meiner Bogenmaß-Werte, etc. Ich war noch Probleme mit diesem, so habe ich eine jsFiddle für Menschen zu spielen als live-Beispiel und poste den code unten, wie gut.

JS:

var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
var lastend = 0;
var data = [200, 60, 15]; //If you add more data values make sure you add more colors
var myTotal = 0; //Automatically calculated so don't touch
var myColor = ['red', 'green', 'blue']; //Colors of each slice

for (var e = 0; e < data.length; e++) {
  myTotal += data[e];
}

for (var i = 0; i < data.length; i++) {
  ctx.fillStyle = myColor[i];
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, canvas.height / 2);
  //Arc Parameters: x, y, radius, startingAngle (radians), endingAngle (radians), antiClockwise (boolean)
  ctx.arc(canvas.width / 2, canvas.height / 2, canvas.height / 2, lastend, lastend + (Math.PI * 2 * (data[i] / myTotal)), false);
  ctx.lineTo(canvas.width / 2, canvas.height / 2);
  ctx.fill();
  lastend += Math.PI * 2 * (data[i] / myTotal);
}

HTML:

<canvas id="can" width="200" height="200" />

Ich mag dieses, es ist super einfach, sehr leicht, benötigt keine externe Scripte wie jQuery, etc. Das ist gut für mich, weil ich Sie verwenden möchten, um Hunderte von diesen geladen, in der über eine partielle Anforderung lol
Das ist großartig! Kann ich nur hinzufügen, dass, wenn Sie wollen, dass die Segmente von Mitternacht position initialisieren var lastend = -1.57. 1.57 ist ein Viertel der Zahl von Bogenmaß in einem Kreis. Danke.

InformationsquelleAutor Alex W

Ich wie in der vorherigen Antwort, aber ich fühlte, es fehlte Klarheit im code und es hat nicht wirklich decken, wie er Etiketten.

Zog ich die Werte in ein data-object-array für die einfache Erklärung. Andere Werte, wie Prozentsatz, den ich ausdrücklich als einer Eigenschaft auf den Daten-Objekt, oder als eine separate variable. Ich denke, das macht es leichter zu Lesen.

Dem refactoring auch einfacher zu binden, die Werte für Eingabe-Kästchen, wenn das ist etwas, das Sie interessiert sind in.

Um zu sehen, was ich meine, und spielen Sie mit den Werten überprüfen Sie heraus dieses CodePen: http://codepen.io/zfrisch/pen/pRbZeb

JS:

  var data = [{
    label: "one",
    value: 100,
    color: 'white'
  }, {
    label: "two",
    value: 100,
    color: 'skyBlue'
  }, {
    label: "three",
    value: 100,
    color: 'yellow'
  }];

  var total = 0;
  for (obj of data) {
    total += obj.value;
  }

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var previousRadian;
  var middle = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: canvas.height / 2,
  };
  
   //background
  ctx.beginPath();
  ctx.arc(middle.x, middle.y, middle.radius, 0, 2 * Math.PI);
  ctx.closePath();
  ctx.stroke();
  ctx.fillStyle = "black";
  ctx.fill();
   //end of background

  for (obj of data) {
    previousRadian = previousRadian || 0;
    obj.percentage = parseInt((obj.value / total) * 100)
    
    ctx.beginPath();
    ctx.fillStyle = obj.color;
    obj.radian = (Math.PI * 2) * (obj.value / total);
    ctx.moveTo(middle.x, middle.y);
    //middle.radius - 2 is to add border between the background and the pie chart
    ctx.arc(middle.x, middle.y, middle.radius - 2, previousRadian, previousRadian + obj.radian, false);
    ctx.closePath();
    ctx.fill();
    ctx.save();
    ctx.translate(middle.x, middle.y);
    ctx.fillStyle = "black";
    ctx.font = middle.radius / 10 + "px Arial";
    ctx.rotate(previousRadian + obj.radian);
    var labelText = "'" + obj.label + "' " + obj.percentage  + "%";
    ctx.fillText(labelText, ctx.measureText(labelText).width / 2, 0);
    ctx.restore();

    previousRadian += obj.radian;
  }

HTML:

<canvas id="myCanvas" width="500" height="500" ></canvas>

InformationsquelleAutor zfrisch

0

Ich hatte das gleiche problem vor, aber ich war in der Lage, dieses problem zu lösen später.

Was mir fehlte, war ich zeichnete einen Bogen in den Kontext und versuchte, ihn zu füllen, durch die die Farbe breitete sich über den ganzen Kreis, weil jetzt der Kontext gebunden war, nur zwischen einem radius-Linie von der Mitte zum Ausgangspunkt des Bogens und der Bogen zu gebundenen Kontext.

Aber es gab keine andere Grenze die Linie vom Ende des Bogens in der Mitte, sobald ich ziehe, die Linie wird mit den folgenden:
```
ctx.lineTo(center coordinates of circle);
```
Habe ich eine komplette Grenze von einem Kuchen, so jetzt, wenn ich füllen die Farbe in Zusammenhang wird es nicht bekommen verbreiten im ganzen Kreis, sondern wird begrenzt sein, die Torte.

InformationsquelleAutor Akshat Maltare

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.