javascript - Chart JS 圆环图饼图悬停偏移

Question

我有这个:

是否可以在悬停时为该图表的一个部分(饼图)设置动画以使其增长，就像通过给它填充或不同的高度来偏移一样？

我认为这应该是可行的，因为在他们的网站上写着“为所有内容设置动画!”，但还没有成功。尝试使用事件但不起作用。

// Doughnut chart
var myDoughnutChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
        datasets: [{
            data: [11, 47, 53],
            backgroundColor: ['rgb(137, 207, 191)', 'rgb(140, 187, 206)', 'rgb(144, 156, 209)']
        }],
        labels: [
            'Elementary',
            'Middle School',
            'High School'
        ],

    },
    options: {
        cutoutPercentage: 60,
        title: {
            display: true,
            text: 'Grade',
            position: 'top',
            fontFamily: 'sans-serif',
            fontSize: 18,
            fontColor: 'rgb(97, 98, 116)',
            padding: '20'
        },
        layout: {
            padding: {
                top: 20,
            }
        },
        legend: {
            display: true,
        }, 
        onHover: stuff,
        slices: {
            1: {
                offset: .5
            }
        }
    }
});

function stuff(e) {
    var activePoints = myDoughnutChart.getElementsAtEvent(e);
    console.log(activePoints);
}

感谢您的帮助。

Answer 1

在 donut 的更新函数中加入这段代码

var innerRadius = reset && animationOpts.animateScale ? 0 : me.innerRadius;
if (index == doughnutIndex) {
   innerRadius = innerRadius + 10;
}

并添加一个新函数setHoverStyle

    setHoverStyle: function(arc) {
        doughnutIndex = arc._index;
        this.update();
    },