HTML5 rotate 做仪表盘

最新推荐文章于 2024-05-09 09:54:41 发布

王豫翔

最新推荐文章于 2024-05-09 09:54:41 发布

阅读量1.5w

点赞数 17

分类专栏：前端技术文章标签： html5 function cvs javascript 设计模式数据仓库

本文链接：https://blog.csdn.net/shyleoking/article/details/7467488

版权

我们的项目中有关于数据仓库和挖掘，用户要求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

最低0.47元/天解锁文章

王豫翔

关注

17
点赞
踩
12

收藏

觉得还不错? 一键收藏
8
评论
HTML5 rotate 做仪表盘

我们的项目中有关于数据仓库和挖掘，用户要求UI的界面需要仪表盘，我网上找了下，没有发现免费的HTML仪表盘，饼图啥图表的确很多，那就没有办法了，我和同事自己做了一个仪表盘，结果如下。之后我们就来讨论下这个简单的仪表盘是怎么做的。我们先大致有一个想法，设定一个宽高2:1的canvas，仪表盘的半径就是canvas的高度，仪表盘需要的数据有上面分几个区域（一般是低中高三个区域，为了测试我们准备了四个区
复制链接

扫一扫

专栏目录