我正在尝试创建一个简单的饼图,如下图所示:
图表将显示测验的结果,用户可以选择 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>
颜色特定于段的大小,因此绿色的一种用于最大的,绿色的三种用于最小的。
最佳答案
即使在搜索 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" />
关于javascript - HTML5 Canvas 饼图,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6995797/