javascript - 如何在 Chart.js 中制作预填充 donut ？

Question

我想使用 Chart.js 创建一个预填充 donut ，如下图所示。

This doughnut is made of using SVG 。
But chart.JS cannot support SVG's

那么有没有办法创建一个像上图一样的 donut 。

Answer 1

可以这样做:

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

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

看看工作时的样子 jsfiddle

参见docs有关选项的说明(cutoutPercentage、rotation 等)。