ChartJS 自定义圆环图未在 2.6.0 版中显示

Question

我有一个自定义的甜甜圈 ChartJS（带有圆边），但找不到正确的方法：

1. 让它在 2.6.0 版本下工作（它在 ChartJS 2.0.2 下工作得很好，但在 2.6.0 下不行）

2. 在绿色下方添加一个静态红色圆圈，半径相同，但线宽只有一半（就像绿色圆圈绘制的轴一样） - 像这样

这里是Plunker

    Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
    Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
        draw: function (ease) {
            var ctx = this.chart.chart.ctx;

            var easingDecimal = ease || 1;
            Chart.helpers.each(this.getDataset().metaData, function (arc, index) {
                arc.transition(easingDecimal).draw();

                var vm = arc._view;
                var radius = (vm.outerRadius + vm.innerRadius) / 2;
                var thickness = (vm.outerRadius - vm.innerRadius) / 2;
                var angle = Math.PI - vm.endAngle - Math.PI / 2;

                ctx.save();
                ctx.fillStyle = vm.backgroundColor;
                ctx.translate(vm.x, vm.y);
                ctx.beginPath();
                ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
                ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math.PI), thickness, 0, 2 * Math.PI);
                ctx.closePath();
                ctx.fill();
                ctx.restore();
            });
        },
    });

    var deliveredData = {
        labels: [
            "Value"
        ],
        datasets: [
            {
                data: [85, 15],
                backgroundColor: [
                    "#3ec556",
                    "rgba(0,0,0,0)"
                ],
                borderWidth: [
                    0, 0
                ]
            }]
    };

    var deliveredOpt = {
        cutoutPercentage: 88,
        animation: {
            animationRotate: true,
            duration: 3000
        },
        legend: {
            display: false
        },
        tooltips: {
            enabled: false
        }
    };

    var chart = new Chart($('#myChart'), {
        type: 'RoundedDoughnut',
        data: deliveredData,
        options: deliveredOpt
    });

Answer 1

对于问题 #1，问题在于 draw 函数中的 this.getDataset().metaData。它返回未定义，因此Chart.helpers.each 下的函数不执行

改用this.getMeta().data。

编辑： 对于问题 #2，您可以参考另一个 Stack Overflow 问题： Charts.js: thin donut chart background