程序博客网 > 圣火明尊战骑进阶数据

HTML仪表盘

来源：互联网 发布：圣火明尊战骑进阶数据 编辑：程序博客网 时间：2024/05/07 23:35

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


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


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

[html] view plaincopy
  1. <body>  
  2.     <div>  
  3.         <canvas id="board" width="800" height="600">  
  4.         </canvas>  
  5.     </div>  
  6. </body>  
  7. </html>  

之后的工作都在javascript中完成，我们需要定义一些对象
[javascript] view plaincopy
  1. //仪表盘面板  
  2. var panel = function(id, option) {  
  3.     this.canvas = document.getElementById(id); //获取canvas元素  
  4.     this.cvs = this.canvas.getContext("2d"); //得到绘制上下文  
  5.     this.width = this.canvas.width; //对象宽度  
  6.     this.height = this.canvas.height; //对象高度  
  7.     this.level = option.level;  
  8.     this.outsideStyle = option.outsideStyle;  
  9. }  

这个panel就是我们的仪表盘对象，参数的id是canvas元素，option是我们需要提交给仪表盘的一些参数值。这个option的定义如下：option对象可以扩展，你可以通过optin定制更加自由强大的仪表盘对象的。
[javascript] view plaincopy
  1. var panelOption = {  
  2.     maxLength: 30,  
  3.     interval: 5,  
  4.     level: [//仪表盘需要呈现的数据隔离区域  
  5.           {start: 0, color: "red" },  
  6.           { start: 30, color: "yellow" },  
  7.           { start: 40, color: "blue" },  
  8.           { start: 100, color: "Lime" }  
  9.           ],  
  10.     outsideStyle: { lineWidth: 4, color: "rgba(100,100,100,1)" }  
  11. };  

在绘制元素的时候，我们常常需要保存和恢复现场，特别当我们使用转移，旋转等方法的时候，一定要记得先save最后restore。为了方便，我们编写了一个save函数提供这个方式，这个模式类似C#中的委托，和设计模式中的观察着模式
[javascript] view plaincopy
  1. panel.prototype.save = function(fn) {  
  2.     this.cvs.save();  
  3.     fn();  
  4.     this.cvs.restore();  
  5. }  

上面这个save可以方便的帮助我们保存和回复现场。

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

[javascript] view plaincopy
  1. panel.prototype.drawArc = function() {  
  2.     var p = this;  
  3.     var cvs = this.cvs;  
  4.     p.save(function() {  
  5.         cvs.translate(p.width / 2, p.height); //将坐标点移到矩形的底部的中间  
  6.         cvs.beginPath();  
  7.         cvs.lineWidth = p.outsideStyle.lineWidth;  
  8.         cvs.strokeStyle = p.outsideStyle.color;  
  9.         cvs.arc(0, 0, p.height - cvs.lineWidth, 0, Math.PI / 180 * 180, true); //画半圆  
  10.         cvs.stroke();  
  11.     });  
  12. }  

然后我们绘制中间颜色的填充区域
[javascript] view plaincopy
  1. panel.prototype.drawLevelArea = function(level) {  
  2.     var p = this;  
  3.     var cvs = this.cvs;  
  4.     for (var i = 0; i < level.length; i++) {  
  5.         p.save(function() {  
  6.             cvs.translate(p.width / 2, p.height);  
  7.             cvs.rotate(Math.PI / 180 * level[i].start);  
  8.             p.save(function() {  
  9.                 cvs.beginPath();  
  10.                 cvs.arc(0, 0, p.height - p.outsideStyle.lineWidth, Math.PI / 180 * 180, Math.PI / 180 * 360);  
  11.                 cvs.fillStyle = level[i].color;  
  12.                 cvs.fill();  
  13.             });  
  14.         });  
  15.     }  
  16. }  

上面的代码中，rotate很重要，我们每次都按level中的值进行旋转，然后画180°的颜色。这样的过程是

第一次旋转是0，没有动，用红色画了180°的半圆

第二次旋转了30°，你可以想想目前的画布放斜了，然后以斜的画了180°黄，这样恰恰好吧红色超过30°的颜色都覆盖了

依次类推，我们不要对arc的起始和结束值做改变，我们只要再画之前，rotate就可以了。当然，要放在save中哦。

之后是画线，道理是一样的，代码如下

[javascript] view plaincopy
  1. panel.prototype.drawLine = function() {  
  2.     var p = this;  
  3.     var cvs = this.cvs;  
  4.     for (var i = 0; i <= 180; i++) {  
  5.         p.save(function() {  
  6.             cvs.translate(p.width / 2, p.height);  
  7.             cvs.rotate(Math.PI / 180 * i);  
  8.             p.save(function() {  
  9.                 cvs.beginPath();  
  10.                 cvs.lineTo(-(p.height - p.outsideStyle.lineWidth) + 10, 0);  
  11.                 cvs.lineTo(-(p.height - p.outsideStyle.lineWidth) + 5, 0);  
  12.                 cvs.stroke();  
  13.                 if (i % 10 == 0) {  
  14.                     p.drawText(i);  
  15.                 }  
  16.             });  
  17.         });  
  18.     }  
  19. }  

不过下面画文字的代码我没有优化，你可以自己按上面的方式旋转下
[javascript] view plaincopy
  1. panel.prototype.drawText = function(val) {  
  2.     var p = this;  
  3.     var cvs = this.cvs;  
  4.     p.save(function() {  
  5.         cvs.lineWidth = 1;  
  6.         cvs.strokeText(val, -(p.height - p.outsideStyle.lineWidth) + 5, 0);  
  7.     });  
  8. }  

最后是画指针，指针的角度值，是通过我们给的value来计算的。
[javascript] view plaincopy
  1. panel.prototype.drawSpanner = function(value) {  
  2.     var p = this;  
  3.     var cvs = this.cvs;  
  4.     p.save(function() {  
  5.         cvs.translate(p.width / 2, p.height);  
  6.         cvs.moveTo(0, 0);  
  7.         cvs.arc(0, 0, p.height / 30, 0, (Math.PI / 180) * 360);  
  8.         cvs.lineWidth = 3;  
  9.         cvs.stroke();  
  10.     });  
  11.   
  12.     p.save(function() {  
  13.         cvs.translate(p.width / 2, p.height);  
  14.         cvs.rotate(Math.PI / 180 * -90);  
  15.         p.save(function() {  
  16.             cvs.rotate(Math.PI / 180 * value);  
  17.             cvs.beginPath();  
  18.             cvs.moveTo(5, -3);  
  19.             cvs.lineTo(0, -p.height * 0.7);  
  20.             cvs.lineTo(-5, -3);  
  21.             cvs.lineTo(5, -3);  
  22.             cvs.fill();  
  23.         });  
  24.     });  
  25. }  

现在主要的方法都完成了，我们实现对用户的接口
[javascript] view plaincopy
  1. panel.prototype.init = function(value) {  
  2.     var p = this;  
  3.     var cvs = this.cvs;  
  4.     cvs.clearRect(0, 0, this.width, this.height);  
  5.   
  6.     p.drawArc();  
  7.     p.drawLevelArea(p.level);  
  8.     p.drawLine();  
  9.     p.drawSpanner(value);  
  10. }  

到此，panel的对象我们都编写完成，以下是如何调用
[javascript] view plaincopy
  1. window.onload = function() {  
  2.     var panelOption = {  
  3.         maxLength: 30,  
  4.         interval: 5,  
  5.         level: [//仪表盘需要呈现的数据隔离区域  
  6.               {start: 0, color: "red" },  
  7.               { start: 30, color: "yellow" },  
  8.               { start: 40, color: "blue" },  
  9.               { start: 100, color: "Lime" }  
  10.               ],  
  11.         outsideStyle: { lineWidth: 4, color: "rgba(100,100,100,1)" }  
  12.     };  
  13.   
  14.     Panel = new panel("board", panelOption);  
  15.     Panel.init(15);  
  16. }  

大家可以测试这个简单的仪表盘了
圣火明尊战骑进阶数据 圣火明尊战骑进阶数据
原创粉丝点击
热门IT博客
冲击波病毒制造者 知乎冲击波病毒制造者 知乎
我与网络演讲稿2000字我与网络演讲稿2000字
化妆品美工
激光切割编程师傅工资
现在有什么网络歌曲
问卷调查软件有哪些
周杰伦和林俊杰知乎
人工智能人脸识别股票
蜂窝移动网络 4g
数据库isnull
c语言编的游戏代码
博奥软件官网
apache spark 版本
系统日志分析软件
抓取淘宝商品
知乎阿里云免费开通码
股票书籍 知乎
新版mac如何强制重启
社交网络的安全问题
提高淘宝综合排名多久
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 动感单车膝盖痛怎么办 膝盖骨坏死怎么办 腰针扎似的疼怎么办 膝盖关节损伤怎么办 皮带断了怎么办 蹲马步腿酸怎么办 鼻子突然肿大怎么办 班组不听话怎么办 打完手心怎么办 走路平衡不好怎么办 脚轴气了怎么办 脚踝关节僵硬怎么办 下半身浮肿怎么办 下半身突然浮肿怎么办 下半身容易水肿怎么办 下半身水肿肥胖怎么办 学习退步了怎么办 狗下半身瘫痪怎么办 饭煮生了怎么办 马尾辫下面头发怎么办 下蹲膝盖酸痛怎么办 练下蹲腰痛怎么办 练完腿后很酸痛怎么办 大腿肉外扩怎么办 大腿肌肉外扩看起腿粗怎么办 下蹲运动后肛裂怎么办 大腿根内测刺痛怎么办 后抢脸翻不过去怎么办 膝盖不敢用力怎么办 单腿深蹲膝盖疼怎么办 结扎后腰酸背痛怎么办 破腹产之后腰酸怎么办 结扎后腰酸怎么办 结扎腰痛怎么办 结扎后腰痛怎么办 深蹲让膝盖疼怎么办 健身房腿蹬断了怎么办 做深蹲头疼怎么办 深蹲后腰酸怎么办 肾气虚怎么办 腰肌僵硬怎么办

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里