如何自定义chartjs圆环图表边框和工具提示

Question

我想自定义图表js圆环图，如下图所示。使用默认边框选项我无法获得预期的结果。有什么方法可以帮助我。

这是我的代码：

var doughnut = document.getElementById("doChart");
var myDoughnutChart = new Chart(doughnut, {
    type: 'doughnut',
    data: {
    labels:["completed","unpaid", "pending", "canceled"],
    datasets: [{
        label: "My First dataset",
        data: [4100,2500, 1800, 2300],
        backgroundColor: ['#4c84ff','#29cc97','#8061ef','#fec402'],
        borderColor: ['#4c84ff','#29cc97','#8061ef','#fec402']
     }]
   },
  options: {

  }
});

Answer 1

在选项中添加 InnerCutout：70

选项：{     percentInnerCutout：70，//使甜甜圈图更苗条 }

Answer 2

从中间切出的图表百分比由cutoutPercentage定义，例如：

options: {
    cutoutPercentage: 80, 
}