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 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
pc加载更多功能和移动端下拉刷新加载数据
Nov 07 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
javascript编程实现栈的方法详解【经典数据结构】
Apr 11 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
再也不怕 JavaScript 报错了,怎么看怎么处理都在这儿
Dec 09 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
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
JavaScript访问样式表代码
2010/10/15 Javascript
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
vue 实现复制内容到粘贴板clipboard的方法
2018/03/17 Javascript
Vue前端开发规范整理(推荐)
2018/04/23 Javascript
Angular使用cli生成自定义文件、组件的方法
2018/09/04 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
2018/10/18 Javascript
nodejs搭建本地服务器并访问文件操作示例
2019/05/11 NodeJs
Vue+Django项目部署详解
2019/05/30 Javascript
关于layui 下拉列表的change事件详解
2019/09/20 Javascript
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
2020/09/08 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
python使用opencv进行人脸识别
2017/04/07 Python
python发送邮件实例分享
2017/07/28 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
Django如何防止定时任务并发浅析
2019/05/14 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
HTML5页面嵌入小程序没有返回按钮及返回页面空白的问题
2020/05/28 HTML / CSS
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
先进事迹材料怎么写
2014/12/30 职场文书
2014年终个人总结报告
2015/03/09 职场文书
政审证明材料
2015/06/19 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书