light-chart
Version:
Charts for mobile visualization.
62 lines (59 loc) • 1.41 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>x 轴平移缩放</title>
<link rel="stylesheet" href="./assets/common.css">
</head>
<body>
<div>
<canvas id="mountNode"></canvas>
<p style="text-align: center;">缩放手势需要在手机端操作，请在手机上操作</p>
</div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="../build/f2-all.js"></script>
<script src="https://gw.alipayobjects.com/os/rmsportal/NjNldKHIVQRozfbAOJUW.js"></script>
<script>
// Generate sample data
const data = [];
const step = Math.PI / 4;
for (let x = -25; x < 25; x += step) {
data.push({ x: x, y: Math.sin(x) });
}
const chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.axis('x', {
grid(text) {
if (text == 0) {
return {
lineDash: null
};
}
}
});
chart.axis('y', {
grid(text) {
if (text == 0) {
return {
lineDash: null
};
}
}
});
chart.tooltip(false);
chart.interaction('pan');
chart.interaction('pinch', {
maxScale: 5,
minScale: 1,
onEnd() {
// console.log(chart.getXScale());
}
});
chart.line().position('x*y').shape('smooth');
chart.render();
</script>
</body>
</html>