我喜欢 Chartist 的功能: https://gionkunz.github.io/chartist-js/
但我希望 Chartist 以与 ChartJS 在显示图表时相同的酷方式来制作饼图动画,如下所示: http://netdna.webdesignerdepot.com/uploads7/easily-create-stunning-animated-charts-with-chart-js/chartjs-demo.html
我读到您可以以某种方式向 Chartist 添加 CSS 动画,但我不知道如何实现。
最佳答案
这是使用 SMIL 在 Chartist 中提供的 - http://gionkunz.github.io/chartist-js/examples.html#svg-path-animation .
虽然这在 Chrome 中可以正常工作 - 您可能需要 IE 的垫片 - SVG animation not working IE9/IE10
这是一个相当愚蠢的反弹实现(它看起来更像 pacman,但它应该很容易通过一点试验和错误找出正确的反向和持续时间;或者您可以作弊并查看 Chart 中的 escapeOutBounce 实现.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;
}
}
}
});
关于javascript - 动画图表师在展会上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31329534/