ChartJS自定義甜甜圈圖未在版本2.6.0中顯示

Question

我有一個自定義的甜甜圈ChartJS（帶有圓角的邊緣），但是找不到正確的方法來：

1. 使其在版本2.6.0下工作（在ChartJS 2.0.2下工作正常，但在版本2.6.0下工作正常）

2. 在具有相同半徑的綠色下添加一個靜態紅色圓圈，但半徑為lineWidth的一半（例如繪制綠色圓圈的軸）-像這樣

這是柱塞

    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，您可以參考此其他堆棧溢出問題： Charts.js：薄甜甜圈圖背景