Question

我喜欢Chartist的功能： https://gionkunz.github.io/chartist-js/

但我希望Chartist能够以图表显示的方式以同样很酷的方式为饼图设置动画，如下所示： http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html

我读过你可以以某种方式为Chartist添加CSS动画，但我无法弄清楚如何。

Answer 1

这是在Chartist中使用SMIL提供的 - http://gionkunz.github.io/chartist-js/examples.html#svg-path-animation。

虽然这可以在Chrome中使用 - 您可能需要一个垫片用于IE - SVG animation not working IE9/IE10

这是一个相当愚蠢的反弹实现（它看起来更像pacman，但它应该很容易通过一点试验和错误找出正确的反向和持续时间;或者你可以作弊并检查图表中的easeOutBounce实现.js代码）

var data = {
    series: [5, 3, 14]
};

var chart = new Chartist.Pie('.pie', data, {
    donut: true,
    donutWidth: 194,
});

chart.on('draw', function (data) {
    if (data.type === 'slice') {
        // Get the total path length in order to use for dash array animation
        var pathLength = data.element._node.getTotalLength();

        // Set a dasharray that matches the path length as prerequisite to animate dashoffset
        data.element.attr({
            'stroke-dasharray': pathLength + 'px ' + pathLength + 'px'
        });

        // Create animation definition while also assigning an ID to the animation for later sync usage
        var animationDefinition = {
            'stroke-dashoffset': {
                id: 'anim' + data.index,
                dur: 500 * data.value / data.totalDataSum,
                from: -pathLength + 'px',
                to: '0px',
                // We need to use `fill: 'freeze'` otherwise our animation will fall back to initial (not visible)
                fill: 'freeze'
            }
        };

        // If this was not the first slice, we need to time the animation so that it uses the end sync event of the previous animation
        if (data.index !== 0) {
            animationDefinition['stroke-dashoffset'].begin = 'anim' + (data.index - 1) + '.end';
        }

        // We need to set an initial value before the animation starts as we are not in guided mode which would do that for us
        data.element.attr({
            'stroke-dashoffset': -pathLength + 'px'
        });

        // We can't use guided mode as the animations need to rely on setting begin manually
        // See http://gionkunz.github.io/chartist-js/api-documentation.html#chartistsvg-function-animate
        data.element.animate(animationDefinition, false);

        // add (naive) bounce
        if (data.endAngle === 360) {
            var index = data.index;
            var dur = 1000 * data.value / data.totalDataSum / 2;
            var from = 0;
            var to = -pathLength / 3;

            for (var i = 0; i < 4; i++) {
                data.element.animate({
                    'stroke-dashoffset': {
                        id: 'anim' + (index + 1),
                        dur: dur,
                        from: from + 'px',
                        to: to + 'px',
                        fill: 'freeze',
                        begin: 'anim' + index + '.end'
                    }
                }, false);

                index++;
                dur /= 1.75;

                var t = from;
                from = to;
                to = t / 2.5;
            }
        }
    }
});

Animate Chartist在节目中

1 个答案: