甜甜圈Chart.JS中是否可以显示100％的百分比

Question

我有一个显示数字的甜甜圈图。但是，有没有一种方法可以使甜甜圈图超出100％，因此我在data部分中给出的数字：例如21，将显示100中的21％完成吗？

显示所需结果的图像：

因此，甜甜圈环显示为灰色，彩色部分表示已完成多少（或我们分配给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个填充了整个甜甜圈），而我希望它显示100％完成率中的3％。

Answer 1

尝试传递[3，97]的数据。您正在尝试将其用作加载指示器，但它似乎旨在显示100％破碎的零件。

如果仅传递[3]，则占数据集的100％

Answer 2

创建两个值的数据集，例如：

[percent_value, 100-percent_value]

这里是完整的演示：

const originalDoughnutDraw = Chart.controllers.doughnut.prototype.draw;

Chart.helpers.extend(Chart.controllers.doughnut.prototype, {
  draw: function() {
    const chart = this.chart;
    const {
      width,
      height,
      ctx,
      config
    } = chart.chart;

    const {
      datasets
    } = config.data;

    const dataset = datasets[0];
    const datasetData = dataset.data;
    const completed = datasetData[0];
    const text = `${completed}% completed`;
    let x, y, mid;

    originalDoughnutDraw.apply(this, arguments);

    const fontSize = (height / 350).toFixed(2);
    ctx.font = fontSize + "em Lato, sans-serif";
    ctx.textBaseline = "top";


    x = Math.round((width - ctx.measureText(text).width) / 2);
    y = (height / 1.8) - fontSize;
    ctx.fillStyle = "#000000"
    ctx.fillText(text, x, y);
    mid = x + ctx.measureText(text).width / 2;
  }
});


var context = document.getElementById('myChart').getContext('2d');
var percent_value = 3;
var chart = new Chart(context, {
  type: 'doughnut',
  data: {
    labels: ['Completed', 'Pending'],
    datasets: [{
      label: 'First dataset',
      data: [percent_value, 100 - percent_value],
      backgroundColor: ['#00baa6', '#ededed']
    }]
  },
  options: {}
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<canvas id="myChart"></canvas>