如何在饼图中填充一定份额的切片?
Posted
技术标签:
【中文标题】如何在饼图中填充一定份额的切片?【英文标题】:How to fill a certain share of slices in a pie chart? 【发布时间】:2022-01-01 05:43:59 【问题描述】:我正在尝试重现这样的图表:
我想弄清楚的是如何在饼图中间填充一定百分比的切片,以及如何以同样的方式填充圆环图。
我曾尝试使用 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>
【问题讨论】:
【参考方案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>
【讨论】:
非常感谢!这正是我想要做的! :)以上是关于如何在饼图中填充一定份额的切片?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用jquery Highcharts在饼图中显示值而不是百分比