我们的项目中有关于数据仓库和挖掘,用户要求UI的界面需要仪表盘,我网上找了下,没有发现免费的HTML仪表盘,饼图啥图表的确很多,那就没有办法了,我和同事自己做了一个仪表盘,结果如下。
之后我们就来讨论下这个简单的仪表盘是怎么做的。我们先大致有一个想法,设定一个宽高2:1的canvas,仪表盘的半径就是canvas的高度,仪表盘需要的数据有上面分几个区域(一般是低中高三个区域,为了测试我们准备了四个区域),刻度线和文字,指针,和指针指向的值。
首先第一步自然是canvas的声明
<body>
<div>
<canvas id="board" width="800" height="600">
</canvas>
</div>
</body>
</html>
之后的工作都在javascript中完成,我们需要定义一些对象
//仪表盘面板
var panel = function(id, option) {
this.canvas = document.getElementById(id); //获取canvas元素
this.cvs = this.canvas.getContext("2d"); //得到绘制上下文
this.width = this.canvas.width; //对象宽度
this.height = this.canvas.height; //对象高度
this.level = option.level;
this.outsideStyle = option.outsideStyle;
}
这个panel就是我们的仪表盘对象,参数的id是canvas元素,option是我们需要提交给仪表盘的一些参数值。这个option的定义如下:option对象可以扩展,你可以通过o