图表 JS 圆环图饼图在悬停时偏移答案

【问题标题】：ChartJS Doughnout Chart Pie Offset on Hover图表 JS 圆环图饼图在悬停时偏移
【发布时间】：2017-08-22 16:43:37
【问题描述】：

我有这个：

是否可以在悬停时为该图表的一个部分（饼图）设置动画以使其增长，例如通过给它填充或不同的高度来抵消？

我认为这应该是可能的，因为在他们的网站上它说“动画一切！”，但还没有任何运气。尝试使用事件但不工作。

// 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);
}

感谢您的帮助。

【问题讨论】：

标签： javascript css chart.js chart.js2

【解决方案1】：

在甜甜圈的更新函数中添加此代码

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

并添加一个新函数setHoverStyle

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

【讨论】：

【解决方案2】：

如果您希望该部分在悬停时向外移动，只需将hoverOffset 设置为一个数字即可。请参阅this example 和文档here。

【讨论】：