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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
广告显示判断
Aug 31 Javascript
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
Jun 02 Javascript
jquery之Document元素选择器篇
Aug 14 Javascript
jQuery 位置插件
Dec 25 Javascript
js 变量类型转换常用函数与代码[比较全]
Dec 01 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
多个jQuery版本共存的处理方案
Mar 17 Javascript
教你JS中的运算符乘方、开方及变量格式转换
Aug 09 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
用vuex写了一个购物车H5页面的示例代码
Dec 04 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 redis实现超迷你全文检索
2017/03/04 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
基于jquery的动态创建表格的插件
2011/04/05 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
IE6-8中Date不支持toISOString的修复方法
2014/05/04 Javascript
再谈javascript原型继承
2014/11/10 Javascript
原生javascript实现图片滚动、延时加载功能
2015/01/12 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
jQuery动态添加
2016/04/07 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
2016/07/18 Javascript
js基于myFocus实现轮播图效果
2017/02/14 Javascript
js实现下拉框效果(select)
2017/03/28 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
angular实现IM聊天图片发送实例
2017/05/08 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
Python开发的实用计算器完整实例
2017/05/10 Python
深入理解Python中range和xrange的区别
2017/11/26 Python
python3监控CentOS磁盘空间脚本
2018/06/21 Python
Windows下安装Scrapy
2018/10/17 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
详解java调用python的几种用法(看这篇就够了)
2020/12/10 Python
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
海量信息软件测试笔试题
2015/08/08 面试题
五年级下册复习计划
2015/01/19 职场文书
师德师风个人总结
2015/02/06 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
python如何查找列表中元素的位置
2022/05/30 Python