Javascript 如何在chart.js中制作预填充甜甜圈？

我想使用chart.js创建一个预填充的甜甜圈，如下图所示

。

---

那么有没有办法像上图那样制作甜甜圈呢。

可以这样做：

var canvas = document.getElementById('myChart');
var data = {
  labels: ["1", "2"],
  datasets: [{
    data: [105, 20],
    backgroundColor: ['da5d78', 'gray'],
  }]
};

var options = {
  rotation: 0,
  cutoutPercentage: 85,
  legend: {
    display: false
  },
  tooltips: {
    enabled: false
  }
}

Chart.Doughnut(canvas, {
  data: data,
  options: options
});

HTML

查看它在工作时的外观

---

有关选项的解释，请参见（

cutoutPercentage

，

rotation

等）。

我不确定我是否理解这个问题。你有没有看过我在我的一些作品中使用了chart.js中的甜甜圈。但是现在我想要一个带有预填充灰线的甜甜圈，我想在预填充的甜甜圈线上显示主甜甜圈的数据。下面是openstudio.redhat.com/…-Abdullah AlMamun@AbdullahAlMamun请核对答案。这不是你要的吗？

<canvas id="myChart" width="400" height="200"></canvas>