最近项目中要使用数据统计柱状图和饼状图. 虽然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饼状图:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/104532243.jpg"></a>
实现代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://localhost:2620/raphael.js"></script>
<script type="text/javascript" src="http://localhost:2620/g.raphael-min.js"></script>
<script type="text/javascript" src="http://localhost:2620/g.pie-min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder");
r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif";
r.g.text(320, 100, "陈凯个人博客访问统计").attr({ "font-size": 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" });
pie.hover(function () {
this.sector.stop();
this.sector.scale(1.1, 1.1, this.cx, this.cy);
if (this.label) {
this.label[0].stop();
this.label[0].scale(1.5);
this.label[1].attr({ "font-weight": 800 });
}
}, function () {
this.sector.animate({ scale: [1, 1, this.cx, this.cy] }, 500, "bounce");
this.label[0].animate({ scale: 1 }, 500, "bounce");
this.label[1].attr({ "font-weight": 400 });
});
};
</script>
<div id="holder"></div>
</div>
</form>
</body>
</html>
柱状图不在演示. 请参考官方版本.
(B)DHTML / CSS based bar graph[CSS版本]
这个Graph完全是基于Html和CSS的. 统计数据时页面下载速度快. 成图背景可以用户自定义调整. 而且有一点是开源的. 生成的柱状图.饼状图 现状图.[有点少]都是基于一个JavaScript支持库文件.在线生成效果截图如下:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/104538332.png"></a>
实现代码:
<!-- graph code begins here-->
<script type="text/javascript" src="js/wz_jsgraphics.js"></script>
<script type="text/javascript" src="js/graph.js"></script>
<div id="myCanvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div>
<!-- graph code begins here-->
<script>
var g = new graph();
//for small values < 5, use a scale of 10x and for values < 1, use 100x
//g.setScale(10);
g.add('01<br>Jan', 145);
g.add('2', 0);
g.add('3', 50);
g.add('4', 130);
g.add('5', 117);
g.add('6', 175);
g.add('7', 205);
g.add('8', 125);
g.add('9', 125);
g.add('10', 135);
g.add('11', 125);
//If called without a height parameter, defaults to 250
//g.render("myCanvas", "test graph");
g.render("myCanvas", "test graph", 250);
</script>
<!-- graph code ends here-->
(C)Rich Chart Graphic[基于.NET增强版]
上面我介绍了两个. 开源的一个JS和CSS版本供参考. 后来参考多方Chart统计图表 最终我在项目中使用的Rich Chart Graphic.先不做介绍我们看看截图效果:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/104545445.jpg"></a>
基本能够满足你统计数据中全部需求. 其中还包含现代财务统计中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文件现在页面中].在线生成:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/104551698.jpg"></a>
实现编码C# in JS :
<%@ Page language="c#"%>
<%@ Import Namespace="RichChart"%>
<%
// browsers should not cache this movie:
Response.Expires = -1;
// create the RichChart object:
RichChart rc = new RichChart();
// load chart template:
rc.LoadTemplate("template.rcp");
// load data values:
rc.LoadData("data.txt");
// set series titles:
rc.Series.Titles="First Round, Final Round";
// finally generate the chart:
rc.Generate();
%>
生成步骤如下: 先加载Rich Chart中统计图模板. 在加载数据值[Database 或XML格式数据 或文本数据等]. 保存图表项目名称. 生成一个。SWF格式的文件. 在服务器端.
如果你下载官方的Rich Chart Server一个Exe文件到本地编辑. 其中集成的数据编辑. 多个统计模板选择. 因为Blue Pacific做的是一个产品 免费已经够用. 其他详细说明.参见官方
(D)Google API Chart Graphic
Google chart统计主要分为两种一种是Image Chart和Interactive Charts[交互式]. 即一个非动态图片Chart和动态提示Chart.
看看Image Chart:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/104558111.jpg"></a>
在看看Interactive Charts:
<a target="_blank" href="http://blog.51cto.com/attachment/201201/104604503.jpg"></a>
上面只是用一个饼状图做了一个实例演示. Google Api 中还包含了其他的具有特色的Chart 例如Area Chart和Geo Map都很有Google的特色.
其中关于Google API中Chart使用代码 我不在赘述. 官方的API文档资料还是非常不错的。提供参考资料如下:
<a href="http://code.google.com/intl/da/apis/charttools/docs/choosing.html" target="_blank">Google API ChartTools;</a>
如上我只是提出我在参考使用大量Chart比较有特点几个. 其他的Chart轻量型组件过一段我回整理一个完整版本. 发布上来, 由于临时写的匆忙.,其中难免有纰漏 网大家指正. 如有疑问请及时联系我
本文转自chenkaiunion 51CTO博客，原文链接:http://blog.51cto.com/chenkai/765096
![JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明 三、函数的调用[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)