多个版本的统计图工具【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饼状图:

实现代码:

<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");
if (this.label) {
this.label[0].animate({ scale: 1 }, 500, "bounce");
this.label[1].attr({ "font-weight": 400 });
}
});
};
</script>
<div id="holder"></div>
</div>
</form>
</body>
</html>

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

演示地址:Graphic demo.

下载地址:Graphic Dowload

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

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

实现代码:

<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>
<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>
<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>

演示地址: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 :

<%@ 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做的是一个产品免费已经够用. 其他详细说明.参见官方

演示地址: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: