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

【问题标题】：How Can customize chartjs doughnut chart border and tooltip如何自定义chartjs圆环图边框和工具提示
【发布时间】：2018-02-27 11:32:51
【问题描述】：

我想自定义图表 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: {

  }
});

【问题讨论】：

类似的甜甜圈图来自Morris.js

标签： javascript graph charts chart.js data-visualization

【解决方案1】：

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

options: {
    cutoutPercentage: 80, 
}

【讨论】：

【解决方案2】：

在选项中添加 percentageInnerCutout: 70

选项：{ percentInnerCutout: 70, // 使圆环图变小 }

【讨论】：