light-chart
Version:
Charts for mobile visualization.
89 lines (84 loc) • 2.13 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义动画</title>
<link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
<canvas id="mountNode"></canvas>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script>
const { Chart, Animate, Util, G } = F2;
Animate.registerAnimation('delayScaleInY', function(shape, animateCfg) {
const box = shape.getBBox();
const origin = shape.get('origin');
const points = origin.points; // 获取柱子顶点
const centerX = (box.minX + box.maxX) / 2;
let centerY;
if (points[0].y - points[1].y <= 0) { // 当顶点在零点之下
centerY = box.maxY;
} else {
centerY = box.minY;
}
shape.transform([
[ 't', centerX, centerY ],
[ 's', 1, 0.1 ],
[ 't', -centerX, -centerY ]
]);
const index = shape.get('index');
let delay = animateCfg.delay;
if (Util.isFunction(delay)) {
delay = animateCfg.delay(index);
}
const easing = animateCfg.easing;
const matrix = shape.getMatrix();
const endMatrix = G.Matrix.transform(matrix, [
[ 't', centerX, centerY ],
[ 's', 1, 10 ],
[ 't', -centerX, -centerY ]
]);
shape.animate().to({
attrs: {
matrix: endMatrix
},
delay,
easing,
duration: animateCfg.duration
});
});
const data = [];
for (let i = 0; i < 50; i++) {
data.push({
x: i,
y: (Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5
});
}
const chart = new Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio
});
chart.axis('x', false);
chart.legend(false);
chart.source(data);
chart.interval()
.position('x*y')
.color('y', '#4a657a-#308e92-#b1cfa5-#f5d69f-#f5898b-#ef5055')
.animate({
appear: {
animation: 'delayScaleInY',
easing: 'elasticOut',
delay(index) {
return index * 10;
}
}
});
chart.render();
</script>
</body>
</html>