甜甜圈间距

Question

我正在尝试实现类似的效果甜甜圈的例子希望有每一块间隔从其他，如果可能的话圆润的边缘我对chartjs相当陌生，所以我没有多少运气找到一些与它相关的答案

这是我当前的js代码的图表

const labelsd = <?php echo $jswallet;?>;
const data = {
labels: labelsd,
datasets: [
{
label: "Wallets",
data: <?php echo $jsamount;?>,
backgroundColor: [
"#1D7A46",
"#C724B1",
"#c7243f",
"#0E75F1",
"#2E8B57"
],
borderColor: [
"#1D7A46",
"#C724B1",
"#c7243f",
"#0E75F1",
"#1D7A46"
],
borderWidth: [1, 1, 1, 1, 1]
}
]
};
const config = {
type: 'doughnut',
data: data,
options: {
cutout: 140,
responsive: true,
plugins: {
legend:{display: false},
title: {display: false,}
}
},
};
const minutedownloads = new Chart(
document.getElementById('dailyspendings'),
config
);

Answer 1

在图形选项中，像这样设置cutout: "95%"和borderRadius: 3

const labelsd = <?php echo $jswallet;?>;
const data = {
labels: labelsd,
datasets: [
{
label: "Wallets",
data: <?php echo $jsamount;?>,
backgroundColor: [
"#1D7A46",
"#C724B1",
"#c7243f",
"#0E75F1",
"#2E8B57"
],
borderColor: [
"#1D7A46",
"#C724B1",
"#c7243f",
"#0E75F1",
"#1D7A46"
],
borderWidth: [1, 1, 1, 1, 1]
}
]
};
const config = {
type: 'doughnut',
data: data,
options: {
cutout: "95%",
borderRadius: 3,
responsive: true,
plugins: {
legend:{display: false},
title: {display: false,}
}
},
};
const minutedownloads = new Chart(
document.getElementById('dailyspendings'),
config
);