Question

我有这个：

是否有可能在悬停以使其增长时为此图表的一个部分（饼图）制作动画，如通过给予填充或不同高度的偏移量？

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

// 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

我放弃了使用chart.js ...创造一些独特的东西太麻烦了，并没有得到社区的任何帮助。

要使用3DJS，这正是我所需要的。

http://bl.ocks.org/erichoco/6694616

Answer 2

将此代码添加到甜甜圈的更新功能中

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

并添加一个新函数setHoverStyle

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

ChartJS Doughnout图表饼图偏移悬停

2 个答案: