javascript - 有没有办法在圆环 Chart.JS 中显示 100 中的 %

标签 javascript charts chart.js donut-chart

我有一个显示数字的圆环图。然而，有没有一种方法可以使圆环图超出 100%，因此我在 data 部分中给出的数字:比如说 21，将显示 21% 的完成情况100？

显示预期结果的图像:

因此， donut 环呈灰色，彩色部分是已完成的数量(或者我们分配给 data 部分的数字，我一直在查看文档，但看不到这可以做到吗？

我目前拥有的代码:

<canvas id="Chart1" style="width=5 height=5"></canvas>
<?php
    $var = 3;
?>

    var ctx = document.getElementById('Chart1').getContext('2d');
    var chart = new Chart(ctx, {
    // The type of chart we want to create
    type: 'doughnut',

    // The data for our dataset
        data: {
            labels: ['% Complete'],
            datasets: [{
                label: 'chart1',
                backgroundColor: 'rgb(102, 178, 255)',
                borderColor: 'rgb(102, 178, 255)',
                // Below I just pull out 1 number from the db
                data: [<?php echo $var ?>] 
            }]
        },
    });

我的代码输出以下内容(因此 3 填满了整个 donut )，而我希望它显示 100% 完成中的 3%。