Question

我有一个自定义圆环ChartJS（带圆角），但无法找到正确的方法：

使其在2.6.0版本下运行（在ChartJS 2.0.2下工作正常，但不在2.6.0下）
在相同半径的绿色下添加一个静态红色圆圈，但线宽的一半（就像绿色圆圈所示的轴一样） - 就像这样

    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，问题在于this.getDataset().metaData函数中的draw。它返回undefined，因此Chart.helpers.each下的函数不会执行

请尝试this.getMeta().data。

修改对于问题＃2，您可以参考其他Stack Overflow问题： Charts.js: thin donut chart background

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

1 个答案: