多个版本的统计图工具【Chart Tools】-阿里云开发者社区

开发者社区> 科技小能手> 正文

多个版本的统计图工具【Chart Tools】

简介:
+关注继续查看

最近项目中要使用数据统计柱状图和饼状图. 虽然Asp.net下也能实现Graphics画图并再次集成生成数据统计功能. 但总体感觉在美观度和简洁上总是达有点差强人意. 很粗糙.我花了一个小时时间做出功能. 但是美化于后台程序关联比较紧,基于程序上美化确一直难以下手.顺便再Codeporject和OpenSource上找到部分关于统计Chart第三方组件,.其中涉及到Javascript版本. 以及基于YUI2.0/3.0的Graphics组件,和部分的Flash版本,CSS版本等.统计中一般涉及到饼状图, 柱状图,分列散点图,线状图4中【常用模式】等各种样式,稍微看了下园子关于统计图表也有涉及, 鉴于此基础上我做了一个完善版本的在Asp.net中关于统计图表的使用组件,统计如下:

(A)GRaphael-JavaScript Charting Libray[JS版本]

Raphael是一个用来生成和简化网络上要实现矢量统计图的JavaScript库文件.Raphael JS版本文件大小只有20KB. 完整版本JS文件也只有137KB. 文件小. 同时支持浏览器: Firefox 3.0+[+号代表包含3.0在内更高版本], Safari 3.0+, Opera 9.5+,Internet Explorer 6.0+. 跨浏览器.Raphael是基于SVG W3c标准和VML作为基础来创建统计图形. 这意味着一个图形对象创建也是Dom对象. 用户可以页面自定义或附加JS事件流程来修改统计图. 小而精悍. 但是有一点就是Raphael提供统计图形比较少. 只有饼状图和柱状图 和散色图三种. 最基础统计样本. 在线效果如下.

Graphael饼状图: 

实现代码: 


  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
  2.  <head runat="server"> 
  3.      <title></title> 
  4.  <script type="text/javascript" src="http://localhost:2620/raphael.js"></script> 
  5.  <script type="text/javascript" src="http://localhost:2620/g.raphael-min.js"></script> 
  6.  <script type="text/javascript" src="http://localhost:2620/g.pie-min.js"></script> 
  7.    
  8.  </head> 
  9.  <body> 
  10.      <form id="form1" runat="server"> 
  11.      <div> 
  12.        
  13.        <script type="text/javascript" charset="utf-8"> 
  14.            window.onload = function () {  
  15.                var r = Raphael("holder");  
  16.                r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";  
  17.    
  18.                r.g.text(320, 100, "陈凯个人博客访问统计").attr({ "font-size": 20 });  
  19.    
  20.                var pie = r.g.piechart(320, 240, 100, [55, 20, 13, 32, 5, 1, 2, 10], { legend: ["%%.%% – Chenkai's Blog", "IE Users-Chenkaiunion","陈凯博客","Silverlight-银光技术","德国柏林","北京"], legendpos: "west" });  
  21.                pie.hover(function () {  
  22.                    this.sector.stop();  
  23.                    this.sector.scale(1.1, 1.1, this.cx, this.cy);  
  24.                    if (this.label) {  
  25.                        this.label[0].stop();  
  26.                        this.label[0].scale(1.5);  
  27.                        this.label[1].attr({ "font-weight": 800 });  
  28.                    }  
  29.                }, function () {  
  30.                    this.sector.animate({ scale: [1, 1, this.cx, this.cy] }, 500, "bounce");  
  31.                    if (this.label) {  
  32.                        this.label[0].animate({ scale: 1 }, 500, "bounce");  
  33.                        this.label[1].attr({ "font-weight": 400 });  
  34.                    }  
  35.                });  
  36.    
  37.            };  
  38.          </script> 
  39.            
  40.          <div id="holder"></div> 
  41.      </div> 
  42.      </form> 
  43.  </body> 
  44.  </html> 

柱状图不在演示. 请参考官方版本.

演示地址:Graphic demo.

下载地址:Graphic Dowload

(B)DHTML / CSS based bar graph[CSS版本]

这个Graph完全是基于Html和CSS的. 统计数据时页面下载速度快. 成图背景可以用户自定义调整. 而且有一点是开源的. 生成的柱状图.饼状图 现状图.[有点少]都是基于一个JavaScript支持库文件.在线生成效果截图如下:

实现代码:


  1. <!-- graph code begins here-->  
  2.  <script type="text/javascript" src="js/wz_jsgraphics.js"></script>  
  3.  <script type="text/javascript" src="js/graph.js"></script>  
  4.     
  5.  <div id="myCanvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div>  
  6.  <!-- graph code begins here-->  
  7.  <script type="text/javascript" src="js/wz_jsgraphics.js"></script>  
  8.  <script type="text/javascript" src="js/graph.js"></script>  
  9.     
  10.  <div id="myCanvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div>  
  11.    
  12.  <script>   
  13.  var g = new graph();  
  14.     
  15.  //for small values < 5, use a scale of 10x and for values < 1, use 100x  
  16.  //g.setScale(10);  
  17.     
  18.  g.add('01<br>Jan', 145);  
  19.  g.add('2', 0);  
  20.  g.add('3', 50);  
  21.  g.add('4', 130);  
  22.  g.add('5', 117);  
  23.  g.add('6', 175);  
  24.  g.add('7', 205);  
  25.  g.add('8', 125);  
  26.  g.add('9', 125);  
  27.  g.add('10', 135);  
  28.  g.add('11', 125);  
  29.     
  30.  //If called without a height parameter, defaults to 250  
  31.  //g.render("myCanvas", "test graph");  
  32.     
  33.  g.render("myCanvas""test graph", 250);  
  34.  </script>  
  35.  <!-- graph code ends here--> 

演示地址:Graphic Bar DEMO

下载地址:Graphic Bar Download

(C)Rich Chart Graphic[基于.NET增强版]

上面我介绍了两个. 开源的一个JS和CSS版本供参考. 后来参考多方Chart统计图表 最终我在项目中使用的Rich Chart Graphic.先不做介绍我们看看截图效果:

基本能够满足你统计数据中全部需求. 其中还包含现代财务统计中3D成图. 报表服务等. 这个Rich Chart是一个产品级别. 我在使用最大感受是: Rich Chart 对数据集成和操作使用相比以上CSS版本和JS版本的容易操作得多.  支持Database, XML和其他数据源等.强悍吧. 例如我在利用YUI2.0版本生成统计图表中, 设计数据操作时Json格式. Database生成JSon中间只要加一个转换操作类即可. 但问题是. 通过Jquery动态控制页面的Json数据. 每次都要动态修改. JS中面向对象操作估计对不熟悉JS的C# 或VB后台程序员是非常痛苦一件事.  而且极易容易报错.

另外一个很关键的是.往往YUI2.0和其他第三方页面插件.定制的统计图格式单一. 对用户自定义生成统计图 余地很有限. 如果你想实现自定义那么你的工作就转移为重新修改JS底层库或新建JS成图库. 其实从0做起了.崩溃吧.

其实我们关心的是像操作。NEt控件方式一样来在编程中实现我们熟悉后台编码来操作生成统计图. 而Rich Chart恰恰符合这个特点.

利用Rich Chart实现一个柱状图.[注意生成为一个Flash文件现在页面中].在线生成:

实现编码C# in JS :


  1. <%@ Page language="c#"%> 
  2. <%@ Import Namespace="RichChart"%> 
  3. <% 
  4. // browsers should not cache this movie: 
  5. Response.Expires = -1; 
  6.  
  7. // create the RichChart object: 
  8. RichChart rc = new RichChart(); 
  9.  
  10. // load chart template: 
  11. rc.LoadTemplate("template.rcp"); 
  12.  
  13. // load data values
  14. rc.LoadData("data.txt"); 
  15.  
  16. // set series titles: 
  17. rc.Series.Titles="First Round, Final Round"
  18.  
  19. // finally generate the chart: 
  20. rc.Generate(); 
  21.  
  22. %> 

生成步骤如下: 先加载Rich Chart中统计图模板. 在加载数据值[Database 或XML格式数据 或文本数据等]. 保存图表项目名称. 生成一个。SWF格式的文件. 在服务器端.

如果你下载官方的Rich Chart Server一个Exe文件到本地编辑. 其中集成的数据编辑. 多个统计模板选择. 因为Blue Pacific做的是一个产品 免费已经够用. 其他详细说明.参见官方

演示地址:Rich Chart Demo

(D)Google API Chart Graphic

关于Google的APIs,大家都可以在http://code.google.com/apis.html上看到,最后为什么提到谷歌的API.? 因为最近在做Google地图中做成像时,是以Google地图作为底层开发的. 当让也少不了了解GoogleAPI文档. 其中最近看的中文版中<<程序天下Google API开发详解>>这本书基本还不错对GoogleAPI解析相当到位. Google API开发开放服务供开发者使用. 当然其中包括Google Api Chart Graphic.统计图表使用. 当然YUI 2.0有些Chart 也是相当不错. 如果有时间你也可以研究一下. Google Chart Graphic. 使用很简单.

Google chart统计主要分为两种一种是Image Chart和Interactive Charts[交互式]. 即一个非动态图片Chart和动态提示Chart.

看看Image Chart:

在看看Interactive Charts:

上面只是用一个饼状图做了一个实例演示. Google Api 中还包含了其他的具有特色的Chart 例如Area Chart和Geo Map都很有Google的特色.

常用的有Line Chart ,Bar Chart, column Chart等. 详见Google API ChartTools 

其中关于Google API中Chart使用代码 我不在赘述. 官方的API文档资料还是非常不错的。提供参考资料如下:

Google API ChartTools;

All Google ChartTools;

如上我只是提出我在参考使用大量Chart比较有特点几个. 其他的Chart轻量型组件过一段我回整理一个完整版本. 发布上来, 由于临时写的匆忙.,其中难免有纰漏 网大家指正. 如有疑问请及时联系我

 


本文转自chenkaiunion 51CTO博客,原文链接:http://blog.51cto.com/chenkai/765096


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
用C#写一个多进程监控自动关机工具
因为据说某server开着就很贵,所以我们跑完测试的job后就要赶紧关机才行,但是测试的job要跑很久,过程中又不需要干什么,所以就得有个守家的,有时候会走很晚。如果有一个自动化关机的工具就好了,当指定的进程结束了以后系统就会自动关机。
800 0
CentOS 升级 git 1.x.x 到 2.x.x 最新版本
在安装完 CentOS 系统之后,自带的 git 版本比较老,有很多功能用不了, 我们需要升级 git 到最新版本,通过 yum update git 发现并不能完成自动升级, 我这里采用手动升级的方式。
2815 0
《React Native移动开发实战》一一2.2 Git版本控制工具
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第2章,第2.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1763 0
在pycharm中使用git版本管理以及同步github
注意:首先你电脑必须安装git版本控制器(软件),在官网下载即可。 pycharm中使用git以及github很简单,首先在设置中搜索github: 点击右边的Create API Token,系统会要求输入你的github账号和密码,当你输入正确点击确认后会进行身份认证,认证成功后会创建一段TOKEN。
1274 0
flash版本更新导致shopex后台上传图片无效的问题
4.8.4~4.8.5版本好像都有这个问题,下面是官方bbs上找到的补丁包,通过ftp上传覆盖就行了 文件清单文件名          文件路径:                                  说明component.
784 0
23706
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载