最近項目中要使用資料統計柱狀圖和餅狀圖. 雖然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=)