我正在使用图表 JS 版本 3，我想绘制带有圆 Angular 边缘的 donut ，我找到了图表 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
}
});
};
这是结果图表:
最佳答案
在 v3 中，您可以使用 borderRadius 原生获得圆 Angular 选项:
const options = {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
borderRadius: 1000
}]
},
options: {}
}
const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.0/chart.js"></script>
</body>编辑:
基于answer from wahab memon但经过编辑，使其适用于所有元素:
Chart.defaults.elements.arc.borderWidth = 0;
Chart.defaults.datasets.doughnut.cutout = '85%';
var chartInstance = new Chart(document.getElementById("chartJSContainer"), {
type: 'doughnut',
data: {
labels: [
'Label 1',
'Label 2',
'Label 3',
'Label 4'
],
datasets: [{
label: 'My First Dataset',
data: [22, 31, 26, 19],
backgroundColor: [
'#000000',
'#ffff00',
'#aaaaaa',
'#ff0000'
]
}]
},
plugins: [{
afterUpdate: function(chart) {
const arcs = chart.getDatasetMeta(0).data;
arcs.forEach(function(arc) {
arc.round = {
x: (chart.chartArea.left + chart.chartArea.right) / 2,
y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
radius: (arc.outerRadius + arc.innerRadius) / 2,
thickness: (arc.outerRadius - arc.innerRadius) / 2,
backgroundColor: arc.options.backgroundColor
}
});
},
afterDraw: (chart) => {
const {
ctx,
canvas
} = chart;
chart.getDatasetMeta(0).data.forEach(arc => {
const startAngle = Math.PI / 2 - arc.startAngle;
const endAngle = Math.PI / 2 - arc.endAngle;
ctx.save();
ctx.translate(arc.round.x, arc.round.y);
ctx.fillStyle = arc.options.backgroundColor;
ctx.beginPath();
ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
});
}
}]
});<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c7ccc5d6d08aced7e4978a9c8a94" rel="noreferrer noopener nofollow">[email protected]</a>/dist/chart.js"></script>
<body>
<canvas id="chartJSContainer" width="200" height="200"></canvas>
</body>关于javascript - Chartjs 3圆环图圆 Angular ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/72784114/