如何在饼图中填充一定份额的切片？

Question

我正在尝试重现这样的图表：

我想弄清楚的是如何在饼图中间填充一定比例的切片，以及如何以相同的方式填充圆环图。

我试过使用 fillRect() 但它没有按照我想要的方式填充切片。如果您对如何获得与我上面展示的图表类似的图表有任何想法，请告诉我。

var canvas = document.getElementById('Arc');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

function draw() {
  context.save();
  context.beginPath();
  context.arc(centerX, centerY, 50, 50, (Math.PI) / 2, true);
  context.clip();
  context.fillStyle = '#090A09';
  context.fillRect(centerX, centerY, -25, 50);
  context.lineWidth = 5;
  context.strokeStyle = '#000000';
  context.stroke();
}
draw();

<canvas id="Arc"></canvas>

Answer 1

fillRect 只是一个矩形，如果您需要饼图，我们可以用圆弧做。

从圆心开始的馅饼我们只是移动到圆心然后绘制圆弧并填充它们，对于甜甜圈馅饼我们必须在相反的方向和不同的半径上做两个圆弧并调用fill()

查看以下示例：

var canvas = document.getElementById('Arc');
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height / 2;

context.beginPath();
context.strokeStyle = 'red';
context.arc(centerX, centerY, 50, 0, Math.PI * 2);
context.stroke();

context.beginPath();
context.fillStyle = 'blue';
context.moveTo(centerX, centerY)
context.arc(centerX, centerY, 50, 0, Math.PI * 0.5);
context.fill()

context.beginPath();
context.fillStyle = 'black';
context.moveTo(centerX, centerY)
context.arc(centerX, centerY, 45, Math.PI * 1.6, Math.PI * 1.8);
context.fill()

context.beginPath();
context.fillStyle = 'lime';
context.arc(centerX, centerY, 51, Math.PI, Math.PI * 1.2);
context.arc(centerX, centerY, 95, Math.PI * 1.2, Math.PI, true);
context.fill()

context.beginPath();
context.fillStyle = 'green';
context.arc(centerX, centerY, 60, Math.PI * 1.8, Math.PI * 2.1);
context.arc(centerX, centerY, 95, Math.PI * 2.1, Math.PI * 1.8, true);
context.fill()

<canvas id="Arc"></canvas>

如何在饼图中填充一定份额的切片？

How to fill a certain share of slices in a pie chart?

javascript

canvas

graphics

pie-chart

donut-chart