57 lines
1.9 KiB
JavaScript
Executable File
57 lines
1.9 KiB
JavaScript
Executable File
var chart = new Chartist.Pie('.ct-chart',
|
|
{
|
|
series: [160, 60 ],
|
|
labels: ['', '']
|
|
}, {
|
|
donut: true,
|
|
donutWidth: 20,
|
|
startAngle: 210,
|
|
total: 260,
|
|
showLabel: false,
|
|
plugins: [
|
|
Chartist.plugins.fillDonut({
|
|
items: [{
|
|
content: '<i class="fa fa-tachometer"></i>',
|
|
position: 'bottom',
|
|
offsetY : 10,
|
|
offsetX: -2
|
|
}, {
|
|
content: '<h3>160<span class="small">mph</span></h3>'
|
|
}]
|
|
})
|
|
],
|
|
});
|
|
|
|
chart.on('draw', function(data) {
|
|
if(data.type === 'slice' && data.index == 0) {
|
|
// 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: 1200,
|
|
from: -pathLength + 'px',
|
|
to: '0px',
|
|
easing: Chartist.Svg.Easing.easeOutQuint,
|
|
fill: 'freeze'
|
|
}
|
|
};
|
|
|
|
// 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, true);
|
|
}
|
|
});
|