图表嵌套了不同厚度的甜甜圈层

Question

如何创建具有不同厚度层的嵌套甜甜圈？Chartjs 只允许在选项属性中定义cutoutPercentage，并且所有图层都通过此值进行更改。我想要一个嵌套的甜甜圈，它有不同厚度的层。例如，在此图表中，我想制作不同厚度的红色和蓝色图层。

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
type: 'doughnut',
options: {
cutoutPercentage: 75
},
data: {
datasets: [{
backgroundColor: [
"red"
],
data: [1]
},
{
backgroundColor: [
"blue"
],
data: [1]
}
]
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<canvas id="chart"></canvas>

Answer 1

我通过将两个甜甜圈图放在彼此之上找到了解决方案。通过这种方式，我能够设置不同的cutoutPercentage值。在此示例中，红色和蓝色图层具有不同的厚度。

var ctx = document.getElementById("chart");
var chart = new Chart(ctx, {
type: 'doughnut',
options: {
cutoutPercentage: 20
},
data: {
datasets: [{
backgroundColor: [
"red"
],
data: [1]
}]
}
});
var ctx2 = document.getElementById("chart2");
var chart2 = new Chart(ctx2, {
type: 'doughnut',
options: {
cutoutPercentage: 90
},
data: {
datasets: [{
backgroundColor: [
"blue"
],
data: [1]
}]
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<div class="container" style="position:relative;  ">
<canvas id="chart" style="position:absolute;"></canvas>
<canvas id="chart2" style="position:absolute;"></canvas>
</div>