light-chart
Version:
Charts for mobile visualization.
62 lines (58 loc) • 1.4 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 data = [
{ time: '周一', tem: 6.9, rain: 10 },
{ time: '周二', tem: 9.5, rain: 13 },
{ time: '周三', tem: 14.5, rain: 14 },
{ time: '周四', tem: 18.2, rain: 10 },
{ time: '周五', tem: 21.5, rain: 12 },
{ time: '周六', tem: 25.2, rain: 16 },
{ time: '周日', tem: 26.5, rain: 13 }
];
const chart = new F2.Chart({
id: 'mountNode',
width: window.innerWidth,
height: window.innerWidth * 0.64,
pixelRatio: window.devicePixelRatio,
syncY: true
});
chart.source(data);
// 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis('time', {
label: {
fontSize: 14
},
grid: null
});
chart.axis('tem', {
label: {
fontSize: 14
}
});
chart.axis('rain', {
label: {
fontSize: 14
}
});
chart.interval().position('time*tem');
chart.line().position('time*rain')
.color('#5ed470')
.size(2)
.shape('smooth');
chart.point().position('time*rain').color('#5ed470');
chart.render();
</script>
</body>
</html>