设为首页 加入收藏

TOP

HTML5 rotate 做仪表盘
2014-11-24 13:07:22 来源: 作者: 【 】 浏览:0
Tags:HTML5 rotate 仪表盘

我们的项目中有关于数据仓库和挖掘,用户要求UI的界面需要仪表盘,我网上找了下,没有发现免费的HTML仪表盘,饼图啥图表的确很多,那就没有办法了,我和同事自己做了一个仪表盘,结果如下。





之后我们就来讨论下这个简单的仪表盘是怎么做的。我们先大致有一个想法,设定一个宽高2:1的canvas,仪表盘的半径就是canvas的高度,仪表盘需要的数据有上面分几个区域(一般是低中高三个区域,为了测试我们准备了四个区域),刻度线和文字,指针,和指针指向的值。




首先第一步自然是canvas的声明



我们定义个用于画半圆的方法,这个方法中,我们将需要画半圆时做的translate放到save函数中,这样画半圆的变形操作不会对其他操作有影响。


】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇Linux设备模型分析之kobject 下一篇HTML5 geolocation和BaiduMap、Bi..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: