Javascript ChartJS自定义甜甜圈图表在2.6.0版中未显示

Javascript ChartJS自定义甜甜圈图表在2.6.0版中未显示,javascript,chart.js,Javascript,Chart.js,我有一个自定义的油炸圈饼ChartJS(带圆角),但找不到正确的方法: 使其在2.6.0版本下工作(在ChartJS 2.0.2下工作正常,但在2.6.0下不工作) 在绿色下方添加一个半径相同但线宽只有一半的静态红色圆圈(如绿色圆圈所绘制的轴),如下所示 这是你的电话号码 对于问题1,问题在于draw函数中的this.getDataset().metaData。它返回的是未定义的,因此Chart.helpers下的函数不执行 请改为尝试this.getMeta().data 编辑: 对于问题2,

我有一个自定义的油炸圈饼ChartJS(带圆角),但找不到正确的方法:

  • 使其在2.6.0版本下工作(在ChartJS 2.0.2下工作正常,但在2.6.0下不工作)

  • 在绿色下方添加一个半径相同但线宽只有一半的静态红色圆圈(如绿色圆圈所绘制的轴),如下所示

  • 这是你的电话号码

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

    请改为尝试
    this.getMeta().data

    编辑: 对于问题2,您可以参考另一个堆栈溢出问题:

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

    请改为尝试
    this.getMeta().data

    编辑: 对于问题2,您可以参考另一个堆栈溢出问题:

    我添加了img来说明问题#2用链接编辑:)链接使用1.0.x版,你知道@RaquelGuimarães是否有更新版本吗?我添加了img来说明问题#2用链接编辑:)链接使用1.0.x版,你知道@RaquelGuimarães是否有更新版本?
        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
        });