Chart.js-删除或添加顶部/底部边框

Question

我使用chart.js 2.9.3

我有一个满足以下条件的甜甜圈图：

• 3个蓝色元素不包含边框
• 1个红色元素包含白色边框
• 3个蓝色元素不能合并为单个元素

查看所附的屏幕截图：

代码如下：

---

<div style="width: 500px">
<canvas id="myChart" width="400" height="400"></canvas>
</div>


<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
<script>

var ctx = document.getElementById('myChart').getContext('2d');

var borderColor = 'white'
var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        labels: ['Red', 'Blue', 'Blue', 'Blue'],

        datasets: [{
            data: [10, 1, 1, 1],
            backgroundColor: [
            'rgba(255, 0, 0, 0.7)',
            'rgba(0, 0, 255, 0.6)',
            'rgba(0, 0, 255, 0.6)',
            'rgba(0, 0, 255, 0.6)',
            ],

            borderColor: 'white',
            borderWidth: [20, 0, 0, 0]
        }]
    },
    options: {
            cutoutPercentage : 70,
            borderSkipped: 'top',
    }
});
</script>

---

如何使红色和蓝色图表元素的高度相同？

换句话说，我要么愿意

• 从红色元素跳过top和bottom边框
• 或向蓝色元素添加top和bottom边框。
• 或仅对left和right的蓝色元素应用0边框

我尝试使用borderSkipped，但没有用。