Chart.js：渐变填充到甜甜圈图栏

Question

我正在尝试对我的甜甜圈图应用背景色渐变填充。

我尝试了几种添加存储在数组和简单变量中的渐变的方法。

var ctx = document.getElementById('level_chart');

    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Sold', 'Left'],
            datasets: [{
                data: [36, 9],
                backgroundColor: [
                    'rgba(80, 93, 247, 0.8)',
                    'rgba(255,255,255 ,1 )'
                ],
                borderColor: [
                    'rgba(80, 93, 247, 1)',
                    'rgba(0,0,0 ,0.7 )'
                ],
                borderWidth: 2.5
            }]
        },
        options: {
            scales: {
                Axes: [{
                    gridLines: {
                        drawBorder: false,
                    },
                }],
            },
            rotation: 1 * Math.PI,
            circumference: 1 * Math.PI,
            tooltips: {
                //enabled: false
                displayColors: false
            },
            legend: {
                display: false
            },
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 2,
                    bottom: 35
                }
            },
            cutoutPercentage: 70,
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>


 <canvas id="level_chart"></canvas>

结果应该是在甜甜圈图的第一部分中进行渐变填充。与此类似：

gradientFill.addColorStop(0, "rgba(80, 93, 247, 0.8)");
gradientFill.addColorStop(1, "rgba(80, 93, 247, 0.4)");

我们非常感谢您的帮助。