canvas画布如何画图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基础折线图</title>
<style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;}</style>
</head>
<body>
<div style="width:600px; height:500px; margin: 0 auto;">
<canvas id="mountNode" width="600" height="400" ></canvas>
</div>
<script>
/*Fixing iframe window.innerHeight 0 issue in Safari*/
document.body.clientHeight;
</script>
<script src="f2.js"></script>
<script>
F2.Global.pixelRatio = window.devicePixelRatio;
const data = [
{ time: '2016-08-08 00:00:00', tem: 10 },
{ time: '2016-08-08 00:10:00', tem: 22 },
{ time: '2016-08-08 00:30:00', tem: 20 },
{ time: '2016-08-09 00:35:00', tem: 26 },
{ time: '2016-08-09 01:00:00', tem: 20 },
{ time: '2016-08-09 01:20:00', tem: 26 },
{ time: '2016-08-10 01:40:00', tem: 28 },
{ time: '2016-08-10 02:00:00', tem: 20 },
{ time: '2016-08-10 02:20:00', tem: 28 }
];
const chart = new F2.Chart({
id: 'mountNode'
});
const defs = {
time: {
type: 'timeCat',
mask: 'MM/DD',
tickCount: 3,
range: [ 0, 1 ]
},
tem: {
tickCount: 5,
min: 0
}
};
// 配置刻度文字大小，供PC端显示用(移动端可以使用默认值20px)
chart.axis('tem', {
label: {
fontSize: 14
}
});
chart.axis('time', {
label: {
fontSize: 14
}
});
chart.source(data, defs);
chart.line().position('time*tem');
chart.render();
</script>
</body>
</html>
最新文章
- 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route
- Orcal函数
- Spark Shell & Spark submit
- [NOIP2015] 提高组 洛谷P2678 跳石头
- js事件委托的方式绑定详解
- sql中 查询条件出现单引号和特殊字符处理
- C# 基础（6）--Winform
- 怎么解决/bin/sh: arm-linux-gcc: not found make
- XPath具体解释
- PHP页面之间跳转方法总结
- eclipse美化，全黑eclipse 保护眼睛
- struts2 s:if 的字符串比较问题
- Java IO流--练习
- ajax异步传送数据的方法
- 手机端实现fullPage——全屏滚动效果
- 使用Python画玫瑰花
- <canvas>中isPointInPath()方法在不同绘制内容中的效果
- Perl的列表和数组
- Click()与Submit()
- DevExpress TextEdit Focus问题