JavaScript通如何过RGraph实现动态仪表盘


Posted in Javascript onOctober 15, 2020

目前针对于统计图的制作方法有很多,可以直接利用快逸报表中的自带统计图,还可以通过自定义统计图个性化定制,当然除此之外,在新的HTML5标准中,新增了一个非常重要的元素—canvas元素。使用该元素,可以在页面中直接进行各种复杂图形的制作。因此,如果使用该元素绘制统计图,比之前使用服务器端控件来生成统计图的方法更加具有优越性,因为使用了该元素之后,绘制统计图的工作是直接在客户端进行的,而不再是在服务器端所完成的了。这不仅意味着不再占用服务器端的资源,而且意味着可以直接利用客户端计算机的强大资源,绘制统计图的速度也就可以大大地得到提高了。而且,因为用来控制canvas图形绘制的脚本代码是可以被压缩的(例如,当你使用Apache服务器的时候,mod_gzip将自动帮你执行代码压缩工作),可以被缓存的,所以也就可以大幅度地减少带宽的占用了。本文就介绍了这样一款制作统计图的插件。设想一下,假如由于客户端的访问,服务器端每天需要创建100,000幅统计图,这对服务器端来说,无疑是一个非常巨大的资源占用。

本文介绍一款名叫Rgraph的插件,使用RGraph统计图制作插件的话,可以将这个资源占用减少到接近零的程度,因为所有创建统计图的工作都是在客户端完成的,就像渲染HTML网页一样,服务器端只负责发送数据,不再负责统计图的生成与发送了,同时带宽的占用情况也大大得到了改善。

另外,由于统计图是依靠JavaScript来生成的,所以当你查看这个显示统计图的HTML网页的时候,该网页是可以为离线状态的了。
对于浏览器来说,目前该插件受到了Firebox 4,Google Chrome 10,Opera 11,Safari 5、IE9浏览器的支持。

官网网站为:http://www.rgraph.net/examples/index.html !

我今天就做关于仪表盘的实现,三个仪表盘,不同样式而已!效果如下:

JavaScript通如何过RGraph实现动态仪表盘

你可以设置头内容如 :java小强 这个标题的内容和样式,也可以设置底部的内容和样式,如:cuisuqiang@163.com !

第一次和第三个创建时:

var gauge1 = new RGraph.Gauge('cvs1', 0, 100, 84);
var gauge3 = new RGraph.Gauge('cvs3', -100, 100, 84);

绘图的地址,最小值,最大值和当前值,第二个参数有点不同:

var gauge2 = new RGraph.Gauge('cvs2', 0, 200, [184,12]);

由于他是两个指针,所以当前值参数是一个数组。

那么有的人说了,那我想画三个指针怎么办,很简单,传三个参数!

我们整个页面的源码给大家看一下,运行后就是上面的效果:

<html>
<head>
  <title>Examples of the Gauge chart</title>
  <script src="RGraph.common.core.js" ></script>
  <script src="RGraph.common.effects.js" ></script>
  <script src="RGraph.common.dynamic.js" ></script>
  <script src="RGraph.gauge.js" ></script>
  <script src="excanvas.js"></script>
  <script>
    window.onload = function () {			
      var gauge1 = new RGraph.Gauge('cvs1', 0, 100, 84);
      gauge1.Set('chart.scale.decimals', 0);
      gauge1.Set('chart.tickmarks.small', 50);
      gauge1.Set('chart.tickmarks.big',5);
      gauge1.Set('chart.title.top', 'Java小强');
      gauge1.Set('chart.title.top.size', 24);
      gauge1.Set('chart.title.bottom', 'cuisuqiang@163.com');
      gauge1.Set('chart.title.bottom.color', '#aaa');
      gauge1.Draw();      
			function Updategauge () {
				gauge1.value=RGraph.random(5,90);
				RGraph.Effects.Gauge.Grow(gauge1);
				setTimeout(Updategauge, 2000);
			}
			Updategauge();
      var gauge2 = new RGraph.Gauge('cvs2', 0, 200, [184,12,58]);
      gauge2.Set('chart.title.top', 'Java小强');
      gauge2.Set('chart.title.bottom.size', 'Italic 14'); // Hmmmm
      gauge2.Set('chart.title.bottom.font', 'Impact');
      gauge2.Set('chart.title.bottom.color', '#ccc');
      gauge2.Set('chart.title.bottom', 'cuisuqiang@163.com');
      gauge2.Set('chart.title.bottom.pos', 0.4);
      gauge2.Set('chart.background.color', 'black');
      gauge2.Set('chart.background.gradient', true);
      gauge2.Set('chart.centerpin.color', '#666');
      gauge2.Set('chart.needle.colors', [RGraph.RadialGradient(gauge2, 125, 125, 0, 125, 125, 25, 'transparent', 'white'),
                        RGraph.RadialGradient(gauge2, 125, 125, 0, 125, 125, 25, 'transparent', '#d66')]);
      gauge2.Set('chart.needle.size', [null, 50]);
      gauge2.Set('chart.text.color', 'white');
      gauge2.Set('chart.tickmarks.big.color', 'white');
      gauge2.Set('chart.tickmarks.medium.color', 'white');
      gauge2.Set('chart.tickmarks.small.color', 'white');
      gauge2.Set('chart.border.outer', '#666');
      gauge2.Set('chart.border.inner', '#333');
      gauge2.Set('chart.colors.ranges', []);
      gauge2.Draw();      
			function Updategauge2 () {
				gauge2.value = [RGraph.random(2,190), RGraph.random(5,195), RGraph.random(5,195)]
				RGraph.Effects.Gauge.Grow(gauge2);
				setTimeout(Updategauge2, 2000);
			}
			Updategauge2();
      var gauge3 = new RGraph.Gauge('cvs3', -100, 100, 84);
      gauge3.Set('chart.scale.decimals', 0);
      gauge3.Set('chart.tickmarks.small', 50);
      gauge3.Set('chart.tickmarks.big',5);
      gauge3.Set('chart.title.top', 'Java小强');
      gauge3.Set('chart.title.top.size', 24);
      gauge3.Set('chart.title.bottom', 'cuisuqiang@163.com');
      gauge3.Set('chart.title.bottom.color', '#aaa');
      gauge3.Set('chart.colors.ranges', [[-100, -90, 'red'], [-90, -80, 'yellow'], [80, 90, 'yellow'], [90, 100, 'red']]);
      gauge3.Set('chart.adjustable', true);
      gauge3.Draw();
			function Updategauge3 () {
				gauge3.value = RGraph.random(2,99);
				RGraph.Effects.Gauge.Grow(gauge3);
				setTimeout(Updategauge3, 2000);
			}
			Updategauge3();			
    }
  </script>
</head>
<body>
  <div style="text-align: center">
    <canvas id="cvs1" width="250" height="250">[No canvas support]</canvas>
    <canvas id="cvs2" width="250" height="250">[No canvas support]</canvas>
    <canvas id="cvs3" width="250" height="250">[No canvas support]</canvas>
  </div>
</body>
</html>

你最好用Firebox 看,使用IE也能看到效果,但是一旦进行动态更新指针的时候,就会把浏览器给搞死!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
[推荐]javascript 面向对象技术基础教程
Mar 03 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
Sep 23 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
PHP+jQuery+Ajax实现多图片上传效果
Mar 14 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
浅析2种JavaScript继承方式
Dec 04 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
利用js实现简易红绿灯
Oct 15 #Javascript
关于Node.js中频繁修改代码重启服务器的问题
Oct 15 #Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 #Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 #Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
Oct 15 #Javascript
angular共享依赖的解决方案分享
Oct 15 #Javascript
ES11新增的这9个新特性,你都掌握了吗
Oct 15 #Javascript
You might like
php中的三元运算符使用说明
2011/07/03 PHP
php中的常用魔术方法汇总
2016/02/14 PHP
php基于session锁防止阻塞请求的方法分析
2017/08/07 PHP
PHP递归统计系统中代码行数
2019/09/19 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
如何学习Javascript入门指导
2013/11/01 Javascript
JQuery伸缩导航练习示例
2013/11/13 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
2016/02/25 Javascript
深入理解Ajax的get和post请求
2016/06/02 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
nodejs使用node-xlsx生成excel的方法示例
2019/08/22 NodeJs
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
Python中unittest用法实例
2014/09/25 Python
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
Python处理XML格式数据的方法详解
2017/03/21 Python
火车票抢票python代码公开揭秘!
2018/03/08 Python
Django实现单用户登录的方法示例
2019/03/28 Python
如何利用python读取micaps文件详解
2020/10/18 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
Mytheresa美国官网:德国知名的女性奢侈品电商
2017/05/27 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
优秀毕业生推荐信范文
2014/03/07 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
护士节慰问信
2015/02/15 职场文书
简历自我评价模板
2015/03/11 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
辩护意见书
2015/06/04 职场文书
村官2015年度工作总结
2015/10/14 职场文书
css3 文字断裂效果
2022/04/22 HTML / CSS