Chartjs 3圓環圖圓角
[英]Chartjs 3 doughnut chart rounded corners
問題描述
我正在使用圖表 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 個解決方案
解決方案1
1 已采納 2022-06-28 09:53:45
在 v3 中，您可以通過使用borderRadius選項來獲得原生圓角：
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>
編輯：
基於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/chart.js@3.8.0/dist/chart.js"></script> <body> <canvas id="chartJSContainer" width="200" height="200"></canvas> </body>
Chartjs 甜甜圈圖圓角半甜甜圈
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.