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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
Apr 06 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
node.js从数据库获取数据
May 08 Javascript
js阻止冒泡和默认事件(默认行为)详解
Oct 20 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 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/17 PHP
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
探讨:如何使用PhpDocumentor生成文档
2013/06/25 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
destoon各类调用汇总
2014/06/20 PHP
jquery解决图片路径不存在执行替换路径
2013/02/06 Javascript
深入理解Javascript动态方法调用与参数修改的问题
2013/12/10 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
JS三级可折叠菜单实现方法
2016/02/29 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
JS实现title标题栏文字不间断滚动显示效果
2016/09/07 Javascript
微信小程序 Page()函数详解
2016/10/17 Javascript
基于bootstrap写的一点localStorage本地储存
2017/11/21 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
如何在Vue.JS中使用图标组件
2020/08/04 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
解决Python中报错TypeError: must be str, not bytes问题
2020/04/07 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
Pycharm2020.1安装无法启动问题即设置中文插件的方法
2020/08/07 Python
Python django框架 web端视频加密的实例详解
2020/11/20 Python
通过css3的filter滤镜改变png图片的颜色的示例代码
2020/05/06 HTML / CSS
中粮集团旗下食品网上购物网站:我买网
2016/09/22 全球购物
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
XML文档面试题
2015/08/05 面试题
网络方面基础面试题
2012/11/16 面试题
老公给老婆的道歉信
2014/01/10 职场文书
七年级历史教学反思
2014/02/05 职场文书
干部下基层实施方案
2014/03/14 职场文书
教研活动总结
2014/04/28 职场文书
购房意向书
2014/08/30 职场文书
最新农村养殖致富:资金投入较低的创业项目有哪些?
2019/09/26 职场文书
分析SQL窗口函数之聚合窗口函数
2022/04/21 Oracle
详解SQL报错盲注
2022/07/23 SQL Server