light-chart
Version:
Charts for mobile visualization.
62 lines (60 loc) • 1.43 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>
<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>
$.getJSON('./data/cereal.json', function(data) {
const chart = new F2.Chart({
id: 'mountNode',
pixelRatio: window.devicePixelRatio
});
chart.source(data);
chart.legend({
position: 'bottom',
itemWidth: null,
align: 'center'
});
chart.tooltip(false);
chart.point().position('Calories*Potassium').color('Manufacturer').style({
fillOpacity: 0.6
});
chart.interaction('pan', {
mode: 'xy',
onEnd() {
console.log('pan', this.xRange, this.yRange);
}
}).interaction('pinch', {
mode: 'xy',
onEnd() {
console.log('pinch', this.xRange, this.yRange);
}
});
chart.scrollBar({
mode: 'xy',
xStyle: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetY: -2
},
yStyle: {
backgroundColor: '#e8e8e8',
fillerColor: '#808080',
offsetX: 2
}
});
chart.render();
});
</script>
</body>
</html>