javascript - HTML5 Canvas 饼图

Question

我正在尝试创建一个简单的饼图，如下图所示:

图表将显示测验的结果，用户可以选择 a、b 或 c。共有 10 个问题，每个问题用户只能选择一个选项。

我想要做的是通过传入 a、b 或 c 的值来显示饼图，其中每个部分的百分比为 100%。

到目前为止我有以下内容:

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();

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

颜色特定于段的大小，因此绿色的一种用于最大的，绿色的三种用于最小的。

Answer 1

即使在搜索 Google 并三次检查我的弧度值等之后，我仍然遇到了问题，所以我创建了一个 jsFiddle供人们作为一个活生生的例子来玩，并将发布下面的代码。 (更新:在 fiddle v2 中，还添加了笔划和标签。)

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);
  ctx.arc(
    canvas.width / 2,  // x
    canvas.height / 2, // y
    canvas.height / 2, // radius
    lastend,           // startingAngle (radians)
    lastend + Math.PI * 2 * (data[i] / myTotal), // endingAngle (radians)
    false // antiClockwise (boolean)
  );
  ctx.lineTo(canvas.width / 2, canvas.height / 2);
  ctx.fill();
  lastend += Math.PI * 2 * (data[i] / myTotal);
}

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