我正在使用图表js版本3,我想绘制圆形边缘的甜甜圈,我找到了图表js版本2的解决方案,但由于图表js 3中的突破性更改,我无法使解决方案与版本3兼容。
下面是版本2中的工作解决方案
Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
draw: function(ease) {
var ctx = this.chart.ctx;
var easingDecimal = ease || 1;
var arcs = this.getMeta().data;
Chart.helpers.each(arcs, function(arc, i) {
arc.transition(easingDecimal).draw();
var pArc = arcs[i === 0 ? arcs.length - 1 : i - 1];
var pColor = pArc._view.backgroundColor;
var vm = arc._view;
var radius = (vm.outerRadius + vm.innerRadius) / 2;
var thickness = (vm.outerRadius - vm.innerRadius) / 2;
var startAngle = Math.PI - vm.startAngle - Math.PI / 2;
var angle = Math.PI - vm.endAngle - Math.PI / 2;
ctx.save();
ctx.translate(vm.x, vm.y);
ctx.fillStyle = i === 0 ? vm.backgroundColor : pColor;
ctx.beginPath();
ctx.arc(radius * Math.sin(startAngle), radius * Math.cos(startAngle), thickness, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = vm.backgroundColor;
ctx.beginPath();
ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
});
}
});
window.onload = function() {
new Chart(document.getElementById('usersChart'), {
type : 'RoundedDoughnut',
data : {
datasets: [
{
data : [40, 20, 20, 20],
backgroundColor: [
'#e77099',
'#5da4e7',
'#8f75e7',
'#8fe768'
],
borderWidth : 0
}]
},
options: {
cutoutPercentage: 70
}
});
};
下面是结果图表:
1条答案
按热度按时间toe950271#
在v3中,您可以使用
borderRadius
选项在本地获得圆角:第一个
编辑:
以answer from wahab memon为基础,但经过编辑,使其适用于所有元素:
第一个