有没有办法在甜甜圈 Chart.JS 中显示 %（满分 100）

Question

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

显示预期结果的图像：

所以甜甜圈圈是灰色的，彩色部分是已经完成了多少（或者我们分配给 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 填满了整个甜甜圈），而我希望它显示 3%（满分 100% 完成）。

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/chart.js@2.8.0"></script>
<canvas id="myChart"></canvas>

有没有办法在甜甜圈 Chart.JS 中显示 %（满分 100）

Is there a way in a donut Chart.JS to show a % out of 100

javascript

charts

donut-chart

chart.js