mirror of
https://github.com/pnp/sp-dev-fx-webparts.git
synced 2025-02-09 06:25:01 +00:00
39 lines
1.2 KiB
HTML
39 lines
1.2 KiB
HTML
<div style="background-color: CadetBlue; padding: 20px;">
|
|
<h3>Chartist Animated Lines</h3>
|
|
<p>Isolated mode: ⚠ mandatory. Source: <a href="https://gionkunz.github.io/chartist-js/" target="_blank">Chartist.js</a>.</p>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chartist@0.11.4/dist/chartist.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chartist@0.11.4/dist/chartist.min.js" onload="drawChart()"></script>
|
|
<div class="ct-chart ct-perfect-fourth"></div>
|
|
</div>
|
|
<script>
|
|
function drawChart() {
|
|
var chart = new Chartist.Line('.ct-chart', {
|
|
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
|
series: [
|
|
[1, 5, 2, 5, 4, 3],
|
|
[2, 3, 4, 8, 1, 2],
|
|
[5, 4, 3, 2, 1, 0.5]
|
|
]
|
|
}, {
|
|
low: 0,
|
|
showArea: true,
|
|
showPoint: false,
|
|
fullWidth: true
|
|
});
|
|
|
|
chart.on('draw', function(data) {
|
|
if(data.type === 'line' || data.type === 'area') {
|
|
data.element.animate({
|
|
d: {
|
|
begin: 2000 * data.index,
|
|
dur: 2000,
|
|
from: data.path.clone().scale(1, 0).translate(0, data.chartRect.height()).stringify(),
|
|
to: data.path.clone().stringify(),
|
|
easing: Chartist.Svg.Easing.easeOutQuint
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</div> |