多个版本的统计图工具【Chart Tools】
2010-03-19 21:34 chenkai 阅读(7783) 评论(18) 编辑 收藏 举报最近项目中要使用数据统计柱状图和饼状图. 虽然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饼状图:
实现代码:
代码
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支持库文件.在线生成效果截图如下:
实现代码:
代码
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 :
代码
2 2 <%@ Import Namespace="RichChart"%>
3 3 <%
4 4 // browsers should not cache this movie:
5 5 Response.Expires = -1;
6 6
7 7 // create the RichChart object:
8 8 RichChart rc = new RichChart();
9 9
10 10 // load chart template:
11 11 rc.LoadTemplate("template.rcp");
12 12
13 13 // load data values:
14 14 rc.LoadData("data.txt");
15 15
16 16 // set series titles:
17 17 rc.Series.Titles="First Round, Final Round";
18 18
19 19 // finally generate the chart:
20 20 rc.Generate();
21 21
22 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文档资料还是非常不错的。提供参考资料如下:
如上我只是提出我在参考使用大量Chart比较有特点几个. 其他的Chart轻量型组件过一段我回整理一个完整版本. 发布上来, 由于临时写的匆忙.,其中难免有纰漏 网大家指正. 如有疑问请及时联系我.
