Диаграмма JS кольцевая с закругленными краями в одном направлении и белой рамкой между сегментами ⇐ Jquery

[Anonymous]

Сегмент кольцевой диаграммы js не отображается в одном направлении. Первый и последний сегменты не работают должным образом, введите описание изображения здесь.
Ожидание: нужны круглые сегменты диаграммы js с закругленными углами, отображаемые в одном направлении с белой рамкой между сегментами.
Введите описание изображения здесь.
Код


< pre class="snippet-code-js lang-js Prettyprint-override">

Код: Выделить всё

// Create a custom Doughnut type with rounded segments
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;
var borderWidth = 20; // Width of the white border for space between segments
Chart.helpers.each(arcs, function(arc, i) {
var vm = arc._view;
var startAngle = vm.startAngle;
var endAngle = vm.endAngle;
var radius = (vm.outerRadius + vm.innerRadius) / 2;
var thickness = (vm.outerRadius - vm.innerRadius) / 2;
ctx.save();
ctx.translate(vm.x, vm.y);
// Draw each arc segment with a white border to create spacing
ctx.beginPath();
ctx.arc(0, 0, radius, startAngle, endAngle);
ctx.lineWidth = thickness * 2 + borderWidth; // Increase width to add border
ctx.strokeStyle = '#FFFFFF'; // Set border color to white
ctx.lineCap = 'round'; // Ensure all segments are rounded on both ends
ctx.stroke();
// Draw inner colored arc over the white border to make it look like a gap
ctx.beginPath();
ctx.arc(0, 0, radius, startAngle, endAngle);
ctx.lineWidth = thickness * 2;
ctx.strokeStyle = vm.backgroundColor; // Set segment color
ctx.stroke();

ctx.restore();
});
}
});
// Initialize the chart
window.onload = function() {
new Chart(document.getElementById('usersChart'), {
type: 'RoundedDoughnut',
data: {
datasets: [{
data: [10, 10, 10, 10, 10, 10, 10, 10], // Adjust data values for even segments
backgroundColor: [
'#5da4e7', '#8fbbe7', '#addbf0', '#4b8de7',
'#4da466', '#8ec486', '#b3dba8', '#63b571'
],
borderWidth: 0
}]
},
options: {
cutoutPercentage: 70,
tooltips: {
enabled: false
} // Optional: Disable tooltips to prevent hover issues
}
});
};

Код: Выделить всё

Подробнее здесь: https://stackoverflow.com/questions/791 ... etween-the