利用ajax做的柱状图，线性统计图，饼状图
-
柱状图，两个不同类型的数据
以下是html页面代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title></title> 5 <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script> 6 <script src="js/DatePicker/WdatePicker.js" type="text/javascript"></script> 7 <script src="js/handlebars.js" type="text/javascript"></script> 8 <script src="js/highcharts.js" type="text/javascript"></script> 9 <script src="js/exporting.js" type="text/javascript"></script> 10 <script src="js/tuxing.js" type="text/javascript"></script> 11 <script type="text/javascript"> 12 function clis() { 13 coundan(); 14 Dindan(); 15 } 16 17 //柱状 18 function coundan() { 19 var tu = $("#dd1").val(); 20 var ends = $("#dd2").val(); 21 // alert(tu); 22 // alert(ends); 23 $.ajax({ 24 type: "POST", 25 url: "CountShow.aspx", 26 data: { 27 method: "dan", 28 str: tu, 29 end: ends 30 }, 31 datatype: 'json', 32 success: function (r) { 33 alert(r); 34 if (r.length > 0) { 35 var r = $.parseJSON(r); 36 alert(r); 37 ZhuZhuan("tongdan", "订单统计", r.lei, "数量统计", r.countd, "金额统计", r.menoy); 38 } 39 }, 40 error: function (XMLHttpRequest, textStatus, errorThrown) { }, 41 complete: function (XMLHttpRequest, textStatus) { } 42 }); 43 } 44 //饼型 45 function Dindan() { 46 var tu = $("#dd1").val(); 47 var ends = $("#dd2").val(); 48 $.ajax({ 49 type: "POST", 50 url: "CountShow.aspx", 51 data: { 52 method: "bingdan", 53 str: tu, 54 end: ends 55 }, 56 datatype: 'json', 57 success: function (r) { 58 if (r.length > 0) { 59 var r = $.parseJSON(r); 60 Bing("binlist", "订单总额比例", "单数", r,"金额",r); 61 } 62 }, 63 error: function (XMLHttpRequest, textStatus, errorThrown) { }, 64 complete: function (XMLHttpRequest, textStatus) { } 65 }); 66 } 67 68 </script> 69 <style type="text/css"> 70 .cs 71 { 72 width: 65px; 73 } 74 .td 75 { 76 width:500px; 77 height:400px; 78 79 } 80 </style> 81 </head> 82 <body style="overflow: scroll"> 83 <input type="text"" id="dd1" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})" class="cs" /> 84 85 <input type="text" id="dd2" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})" class="cs" /> 86 87 <button id="bbt" onclick="clis()"> 88 查询</button> 89 <div id="tongdan" class="td"> 90 </div> 91 <div id="binlist" class="td"> 92 </div> 93 </body> 94 </html>
js引用文件 其他的几个js文件可以去这个网址下载（http://www.hcharts.cn/demo/index.php?p=27），上面还有很多不同类型的统计（包括源代码）
1 /* 2 * My97 DatePicker 4.5 3 * SITE: http://dp.my97.net 4 * BLOG: http://my97.cnblogs.com 5 * downlod:http://www.codefans.net 6 * MAIL: smallcarrot@163.com 7 */ 8 var $dp,WdatePicker; 9 (function(R){var $={ 10 $wdate:true, 11 $dpPath:"", 12 $crossFrame:true, 13 position:{}, 14 lang:"auto", 15 skin:"default", 16 dateFmt:"yyyy-MM-dd", 17 realDateFmt:"yyyy-MM-dd", 18 realTimeFmt:"HH:mm:ss", 19 realFullFmt:"%Date %Time", 20 minDate:"1900-01-01 00:00:00", 21 maxDate:"2099-12-31 23:59:59", 22 startDate:"", 23 alwaysUseStartDate:false, 24 yearOffset:1911, 25 isShowWeek:false, 26 highLineWeekDay:true, 27 isShowClear:true, 28 isShowToday:true, 29 isShowOthers:true, 30 readOnly:false, 31 errDealMode:0, 32 autoPickDate:null, 33 qsEnabled:true, 34 35 disabledDates:null,disabledDays:null,opposite:false,onpicking:null,onpicked:null,onclearing:null,oncleared:null,eCont:null,vel:null,errMsg:"",quickSel:[],has:{}};WdatePicker=T;var W=window,O="document",J="documentElement",C="getElementsByTagName",U,A,S,I,a;switch(navigator.appName){case"Microsoft Internet Explorer":S=true;break;case"Opera":a=true;break;default:I=true;break}A=L();if($.$wdate)M(A+"skin/WdatePicker.css");U=W;if($.$crossFrame){try{while(U.parent[O]!=U[O]&&U.parent[O][C]("frameset").length==0)U=U.parent}catch(P){}}if(!U.$dp)U.$dp={ff:I,ie:S,opera:a,el:null,win:W,status:0,defMinDate:$.minDate,defMaxDate:$.maxDate,flatCfgs:[]};Q=U.$dp;if(Q.status==0)Y(W,function(){T(null,true)});if(!W[O].docMD){E(W[O],"onmousedown",D);W[O].docMD=true}if(!U[O].docMD){E(U[O],"onmousedown",D);U[O].docMD=true}E(W,"onunload",function(){if(Q.dd)Q.dd.style.display="none"});function B(){U.$dp=U.$dp||{};obj={$:function($){return(typeof $=="string")?this.win[O].getElementById($):$},$D:function($,_){return this.$DV(this.$($).value,_)},$DV:function(_,$){if(_!=""){this.dt=Q.cal.splitDate(_,Q.cal.dateFmt);if($)for(var A in $){if(this.dt[A]===undefined)this.errMsg="invalid property:"+A;this.dt[A]+=$[A]}if(this.dt.refresh())return this.dt}return""},show:function(){if(this.dd)this.dd.style.display="block"},hide:function(){if(this.dd)this.dd.style.display="none"},attachEvent:E};for(var $ in obj)U.$dp[$]=obj[$];Q=U.$dp}function E(A,$,_){if(S)A.attachEvent($,_);else{var B=$.replace(/on/,"");_._ieEmuEventHandler=function($){return _($)};A.addEventListener(B,_._ieEmuEventHandler,false)}}function L(){var _,A,$=document.getElementsByTagName("script");for(var B=0;B<$.length;B++){_=$[B].src.substring(0,$[B].src.toLowerCase().indexOf("wdatepicker.js"));A=_.lastIndexOf("/");if(A>0)_=_.substring(0,A+1);if(_)break}return _}function F(F){var E,C;if(F.substring(0,1)!="/"&&F.indexOf("://")==-1){E=U.location.href;C=location.href;if(E.indexOf("?")>-1)E=E.substring(0,E.indexOf("?"));if(C.indexOf("?")>-1)C=C.substring(0,C.indexOf("?"));var _="",D="",A="",H,G,B="";for(H=0;H<Math.max(E.length,C.length);H++)if(E.charAt(H).toLowerCase()!=C.charAt(H).toLowerCase()){G=H;while(E.charAt(G)!="/"){if(G==0)break;G-=1}_=E.substring(G+1,E.length);_=_.substring(0,_.lastIndexOf("/"));D=C.substring(G+1,C.length);D=D.substring(0,D.lastIndexOf("/"));break}if(_!="")for(H=0;H<_.split("/").length;H++)B+="../";if(D!="")B+=D+"/";F=location.href.substring(0,location.href.lastIndexOf("/")+1)+B+F}$.$dpPath=F}function M(B,$,D){var A=W[O],E=A[C]("HEAD").item(0),_=A.createElement("link");_.href=B;_.rel="stylesheet";_.type="text/css";if($)_.title=$;if(D)_.charset=D;E.appendChild(_)}function Y($,_){E($,"onload",_)}function G($){$=$||U;var A=0,_=0;while($!=U){var D=$.parent[O][C]("iframe");for(var F=0;F<D.length;F++){try{if(D[F].contentWindow==$){var E=V(D[F]);A+=E.left;_+=E.top;break}}catch(B){}}$=$.parent}return{"leftM":A,"topM":_}}function V(E){if(S)return E.getBoundingClientRect();else{var A={ROOT_TAG:/^body|html$/i,OP_SCROLL:/^(?:inline|table-row)$/i},G=null,_=E.offsetTop,F=E.offsetLeft,D=E.offsetWidth,B=E.offsetHeight,C=E.offsetParent;if(C!=E)while(C){F+=C.offsetLeft;_+=C.offsetTop;if(C.tagName.toLowerCase()=="body")G=C.ownerDocument.defaultView;C=C.offsetParent}C=E.parentNode;while(C.tagName&&!A.ROOT_TAG.test(C.tagName)){if(C.scrollTop||C.scrollLeft)if(!A.OP_SCROLL.test(C.style.display))if(!a||C.style.overflow!=="visible"){F-=C.scrollLeft;_-=C.scrollTop}C=C.parentNode}var $=Z(G);F-=$.left;_-=$.top;D+=F;B+=_;return{"left":F,"top":_,"right":D,"bottom":B}}}function N($){$=$||U;var _=$[O];_=_[J]&&_[J].clientHeight&&_[J].clientHeight<=_.body.clientHeight?_[J]:_.body;return{"width":_.clientWidth,"height":_.clientHeight}}function Z($){$=$||U;var B=$[O],A=B[J],_=B.body;B=(A&&A.scrollTop!=null&&(A.scrollTop>_.scrollLeft||A.scrollLeft>_.scrollLeft))?A:_;return{"top":B.scrollTop,"left":B.scrollLeft}}function D($){src=$?($.srcElement||$.target):null;if(Q&&!Q.eCont&&Q.dd&&Q.dd.style.display=="block"&&src!=Q.el)Q.cal.close()}function X(){Q.status=2;H()}function H(){if(Q.flatCfgs.length>0){var $=Q.flatCfgs.shift();$.el={innerHTML:""};$.autoPickDate=true;$.qsEnabled=false;K($)}}var R,_;function T(E,$){B();Q.win=W;E=E||{};if($){if(!D()){_=_||setInterval(function(){if(U[O].readyState=="complete")clearInterval(_);T(null,true)},50);return}if(Q.status==0){Q.status=1;K({el:{innerHTML:""}},true)}else return}else if(E.eCont){E.eCont=Q.$(E.eCont);Q.flatCfgs.push(E);if(Q.status==2)H()}else{if(Q.status==0)Q.status=1;if(Q.status!=2)return;var C=A();if(C){Q.srcEl=C.srcElement||C.target;C.cancelBubble=true}E.el=Q.$(E.el||Q.srcEl);if(!E.el||E.el&&E.el.disabled||(E.el==Q.el&&Q.dd.style.display!="none"&&Q.dd.style.left!="-1970px"))return;K(E)}function D(){if(S&&U!=W&&U[O].readyState!="complete")return false;return true}function A(){if(I){func=A.caller;while(func!=null){var $=func.arguments[0];if($&&($+"").indexOf("Event")>=0)return $;func=func.caller}return null}return event}}function K(E,_){for(var D in $)if(D.substring(0,1)!="$")Q[D]=$[D];for(D in E)if(Q[D]===undefined)Q.errMsg="invalid property:"+D;else Q[D]=E[D];Q.elProp=Q.el&&Q.el.nodeName=="INPUT"?"value":"innerHTML";if(Q.el[Q.elProp]==null)return;if(Q.lang=="auto")Q.lang=S?navigator.browserLanguage.toLowerCase():navigator.language.toLowerCase();if(!Q.dd||Q.eCont||(Q.lang&&Q.realLang&&Q.realLang.name!=Q.lang&&Q.getLangIndex&&Q.getLangIndex(Q.lang)>=0)){if(Q.dd&&!Q.eCont)U[O].body.removeChild(Q.dd);if($.$dpPath=="")F(A);var B="<iframe src=\""+$.$dpPath+"My97DatePicker.htm\" frameborder=\"0\" border=\"0\" scrolling=\"no\"></iframe>";if(Q.eCont){Q.eCont.innerHTML=B;Y(Q.eCont.childNodes[0],X)}else{Q.dd=U[O].createElement("DIV");Q.dd.style.cssText="position:absolute;z-index:19700";Q.dd.innerHTML=B;U[O].body.appendChild(Q.dd);Y(Q.dd.childNodes[0],X);if(_)Q.dd.style.left=Q.dd.style.top="-1970px";else{Q.show();C()}}}else if(Q.cal){Q.show();Q.cal.init();if(!Q.eCont)C()}function C(){var F=Q.position.left,B=Q.position.top,C=Q.el;if(C!=Q.srcEl&&(C.style.display=="none"||C.type=="hidden"))C=Q.srcEl;var H=V(C),$=G(W),D=N(U),A=Z(U),E=Q.dd.offsetHeight,_=Q.dd.offsetWidth;if(isNaN(B)){if(B=="above"||(B!="under"&&(($.topM+H.bottom+E>D.height)&&($.topM+H.top-E>0))))B=A.top+$.topM+H.top-E-3;else B=A.top+$.topM+H.bottom;B+=S?-1:1}else B+=A.top+$.topM;if(isNaN(F))F=A.left+Math.min($.leftM+H.left,D.width-_-5)-(S?2:0);else F+=A.left+$.leftM;Q.dd.style.top=B+"px";Q.dd.style.left=F+"px"}}})($dp)
这是后台代码
1 protected void Page_Load(object sender, EventArgs e) 2 { 3 classDBOP db = new classDBOP(); 4 5 if (!IsPostBack) 6 { 7 string strsj = Decode("str").ToString(); //Decode获取ajax里面的参数 8 string enddate = Decode("end").ToString(); 9 if (strsj != null && enddate != null) 10 { 11 switch (Decode("method")) 12 { 13 case "dan": //method 方法 14 DataTable dt = db.ExcSql(Ding(strsj, enddate)); //ExcSql是封装好的方法，sql语句的执行，可以自己些数据库连接语句和执行方法 15 JObject jo =Count(dt); 16 Context.Response.ClearContent(); 17 Context.Response.Write(jo.ToString()); 18 Context.Response.End(); 19 break; 20 //case "bingdan": 21 // dt = db.ExcSql(get.Ding(strsj, enddate)); 22 // JArray ja = get.Dindan(dt); 23 // Context.Response.ClearContent(); 24 // Context.Response.Write(ja.ToString()); 25 // Context.Response.End(); 26 // break; 27 } 28 } 29 } 30 } 31 /// <summary> 32 /// 柱状审核统计 33 /// </summary> 34 /// <param name="year"></param> 35 /// <param name="counts"></param> 36 /// <returns></returns> 37 public string Ding(string strsj, string endsj) 38 { 39 string sund = @"select OPState as 类别,count(OPState) as 数量统计, sum(PayMoney) as 金额之和 40 from UUSpotOrder where TicketsType='disney' and OrderDate between '" + strsj + "' and '" + endsj + "'group by OPState order by count(OPState) asc"; 41 return sund; 42 } 43 /// <summary> 44 ///订单统计(柱状) 45 /// </summary> 46 /// <param name="ds"></param> 47 /// <returns></returns> 48 public JObject Count(DataTable ds) 49 { 50 JObject obe = new JObject(); 51 JArray men = new JArray(); 52 JArray jo = new JArray(); 53 JArray ja = new JArray(); 54 if (ds != null && ds.Rows.Count > 0) 55 { 56 for (int i = 0; i < ds.Rows.Count; i++) 57 { 58 string lei = Convert.ToString(ds.Rows[i]["类别"]); 59 int one = Convert.ToInt32(ds.Rows[i]["数量统计"]); 60 int meny = Convert.ToInt32(ds.Rows[i]["金额之和"]); 61 ja.Add(lei); 62 jo.Add(one); 63 men.Add(meny); 64 } 65 obe.Add("lei", ja); 66 obe.Add("countd", jo); 67 obe.Add("menoy", men); 68 } 69 return obe; 70 }
这是js代码
1 //线型人数统计显示 2 /* 3 同一种类型数据 4 1.参数 id:标签的id；texts：标题名称；jmonth：所传的横坐标参数；names：自定义名称； 5 json：参数；yuan：数据的单位 6 2.例子 ShowCount("xianMoney", "2015出游金额统计", r.jmonth, "金额", r.monthCount, "元"); 7 3.参数格式（这里只是一般的数据，格式一样的） 8 {"jmonth": ["2月""3月", "4月""5月","6月"], 9 "monthCount": [0,0,2,0, 0,0 ]} 10 11 */ 12 function ShowCount(id,texts,jmonth,names,json,yuan) { 13 $("#"+id).highcharts({ 14 title: { 15 text: texts, 16 x: -20 //center 17 }, 18 subtitle: { 19 text: '', 20 x: -20 21 }, 22 xAxis: { 23 categories: jmonth 24 }, 25 yAxis: { 26 title: { 27 text: '' 28 }, 29 plotLines: [{ 30 value: 0, 31 width: 1, 32 color: '#808080' 33 }] 34 }, 35 tooltip: { 36 headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 37 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}('+ yuan +')</b></td></tr>', 38 footerFormat: '</table>', 39 shared: true, 40 useHTML: true 41 }, 42 legend: { 43 layout: 'vertical', 44 align: 'right', 45 verticalAlign: 'middle', 46 borderWidth: 0 47 }, 48 series: [{ 49 name: names, 50 data: json 51 }] 52 }); 53 } 54 //饼型统计 55 /* 56 同一种类型数据 57 1.参数 id:标签的id；text：标题名称；name：自定义名称； 58 json：参数； 59 2.例子Bing("bingMoney", "2015出游金额百分比", "金额", r); 60 3.参数格式（这里只是一般的数据，格式一样的） 61 {[["1",0],["2",0],["3",35],["4",0],["5",0 ],["6",0]]} 62 63 */ 64 function Bing( id, text,name,json) { 65 $('#' + id).highcharts({ 66 chart: { 67 type: 'pie', 68 options3d: { 69 enabled: true, 70 alpha: 45, 71 beta: 0 72 } 73 }, 74 title: { 75 text: text 76 }, 77 tooltip: { 78 pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>' 79 }, 80 plotOptions: { 81 pie: { 82 allowPointSelect: true, 83 cursor: 'pointer', 84 depth: 35, 85 dataLabels: { 86 enabled: true, 87 format: '{point.name}' 88 } 89 } 90 }, 91 series: [{ 92 type: 'pie', 93 name: name, 94 data: json 95 }] 96 }); 97 } 98 //柱状统计图(多个不同数据类型) 99 /* 100 两种类型数据，也可以多种，在多种的情况下，在添加（name: namet ,data: jsons） 101 1.参数 id:标签的id；texts：标题名称；year：所传的横坐标参数；names：第一组自定义名称； 102 json：第一组参数；namet：第二组自定义名字；jsons：第二组参数 103 2.例子ZhuZhuan("tongdan", "订单统计", r.lei, "数量统计", r.countd, "金额统计", r.menoy); 104 3.参数格式 105 {"lei": [ 106 "审闭 ", 107 "取消 ", 108 "待审 " 109 ], 110 "countd": [ 111 5, 112 6, 113 11 114 ], 115 "menoy": [ 116 200, 117 0, 118 0 119 ] 120 } 121 */ 122 function ZhuZhuan(id, texts, year,names, json, namet,jsons) { 123 $('#'+id).highcharts({ 124 chart: { 125 type: 'column' 126 }, 127 title: { 128 text: texts 129 }, 130 subtitle: { 131 text: '' 132 }, 133 xAxis: { 134 categories:year 135 }, 136 yAxis: { 137 min: 0 138 }, 139 140 tooltip: { 141 headerFormat: '<span style="font-size:10px">{point.key}</span><table>', 142 pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + 143 '<td style="padding:0"><b>{point.y}</b></td></tr>', 144 footerFormat: '</table>', 145 shared: true, 146 useHTML: true 147 }, 148 plotOptions: { 149 column: { 150 pointPadding: 0.2, 151 borderWidth: 0 152 } 153 }, 154 series: [{ 155 name: names+'(单)', /*单位可以随意改动*/ 156 data: json 157 }, { 158 name: namet + '(元)', 159 data: jsons 160 }] 161 }); 162 }
以下是图片展示
2.线性统计和饼形（同种类型）
这是html代码和js引用文件
1 <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script> 2 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 3 <script src="js/DatePicker/WdatePicker.js" type="text/javascript"></script> 4 <script type="text/javascript" src="js/highcharts.js"></script> 5 <script type="text/javascript" src="js/exporting.js"> </script> 6 <script src="js/tuxing.js" type="text/javascript"></script> 7 <script type="text/jscript"> 8 function abc() { 9 AjaxCount(); 10 BingMoney(); 11 12 } 13 function AjaxCount() { 14 //获取人数 15 $.ajax({ 16 type: "POST", 17 url: "MonthSelect.aspx", 18 data: { 19 method: "monthCount", 20 date: $("#date").val(), //获取html标签的值 21 selexioa: $("#selexiaos").val(), 22 selextfs: $("#selefs").val() 23 }, 24 datatype: 'json', 25 success: function (r) { 26 alert(r); 27 if (r.length > 0) { 28 var r = $.parseJSON(r); 29 ShowCount("xianCount", "2015出游人数统计", r.jmonth, " 销售方式", r.monthCount, "人"); //调用tuxing。js里面写好的方法 30 } 31 }, 32 error: function (XMLHttpRequest, textStatus, errorThrown) { }, 33 complete: function (XMLHttpRequest, textStatus) { } 34 }) 35 } 36 //饼型金额 37 function BingMoney() { 38 var date = $("#date").val(); 39 //获取后台金额方法 40 $.ajax({ 41 type: "POST", 42 url: "MonthSelect.aspx", 43 data: { 44 method: "Bing", 45 date: $("#date").val(), 46 selexioa: $("#selexiaos").val(), 47 selextfs: $("#selefs").val() 48 }, 49 datatype: 'json', 50 success: function (r) { 51 alert(r); 52 if (r.length > 0) { 53 var r = $.parseJSON(r); 54 Bing("bingMoney", "2015出游金额百分比", "金额", r); 55 } 56 }, 57 error: function (XMLHttpRequest, textStatus, errorThrown) { }, 58 complete: function (XMLHttpRequest, textStatus) { } 59 }) 60 } 61 62 <script> 63 64 65 <body style="overflow: scroll"> 66 <input type="text" id="date" onfocus="WdatePicker({dateFmt: 'yyyy'})" value="2015"/> 67 <select name="selexiaos" id="selexiaos"> 68 <option value="直销">直销</option> 69 <option value="补单">补单</option> 70 <option value="分销">分销</option> 71 </select> 72 <select name="selefs" id="selefs"> 73 <option value="TU">TU</option> 74 <option value="OA">OA</option> 75 <option value="TM">TM</option> 76 </select> 77 <button id="select" onclick="abc();"> 78 查询</button> 79 <div id="xianCount" class="yu"> 80 </div> 81 <%-- <div id="xianMoney" class="yu"> 82 </div> 83 <div id="zhuCount" class="yu"> 84 </div> 85 <div id="zhuMoney" class="yu"> 86 </div>--%> 87 <div id="bingMoney" class="yu"> 88 </div> 89 </body>
后台代码
1 public partial class MonthSelect : CTUClassLibrary.Page 2 { 3 4 protected void Page_Load(object sender, EventArgs e) 5 { 6 classDBOP db = new classDBOP(); 7 Lists get = new Lists(); 8 string dates = Decode("date").ToString(); //获取ajax的参数值 9 string xiao = Decode("selexioa").ToString(); 10 string fs = Decode("selextfs").ToString(); 11 12 if (dates != null) 13 { 14 //sql条件语句 15 string countmoney = "sum(Amount)"; 16 string counts = "count(Child)+count(Adult)"; 17 string zx = " and Drp='" + fs + "' and ISFX='" + xiao + "'"; 18 19 switch (Decode("method")) 20 { 21 case "monthCount": //线性统计图 22 DataTable dt = db.ExcSql(get.XianList(dates, counts, zx));//可以自己写sql语句和数据库连接方式 23 JObject jo = get.GetMonth(dt); 24 Str(jo); 25 break; 26 case "Bing": //饼形统计 27 dt = db.ExcSql(get.XianList(dates, countmoney, zx)); 28 JArray jr = get.GetBing(dt); 29 Context.Response.ClearContent(); 30 Context.Response.Write(jr.ToString()); 31 Context.Response.End(); 32 break; 33 } 34 } 35 } 36 public void Str(JObject jo) 37 { 38 Context.Response.ClearContent(); 39 Context.Response.Write(jo.ToString()); 40 Context.Response.End(); 41 } 42 }
1 public class Lists 2 { 3 /// <summary> 4 /// 线型统计获取金额 5 /// </summary> 6 /// <param name="year"></param> 7 /// <param name="counts"></param> 8 /// <returns></returns> 9 public string XianList(string year, string counts, string zhixiao) 10 { 11 string sund = counts + " from CTUOrder where year(starttime)=" + year; 12 //拼接查询语句（sql语句用 with as） 13 StringBuilder sb = new StringBuilder(); 14 sb.Append("with "); 15 for (int i = 1; i < 13; i++) 16 { 17 sb.Append(" yue" + i + " as( select \"" + i + "\"=" + sund + " and month(getdate())=" + i + " " + zhixiao); 18 if (i == 12) 19 { 20 sb.Append(")"); 21 } 22 else 23 { 24 sb.Append("),"); 25 } 26 27 } 28 sb.Append(" select * from "); 29 for (int j = 1; j < 13; j++) 30 { 31 if (j == 12) 32 { 33 sb.Append("yue" + j + ""); 34 } 35 else 36 { 37 sb.Append("yue" + j + ","); 38 } 39 } 40 return sb.ToString(); ; 41 } 42 /// <summary> 43 /// 构建JSON字符串(线型统计图) 44 /// </summary> 45 /// <param name="dt"></param> 46 /// <returns></returns> 47 public JObject GetMonth(DataTable ds) 48 { 49 JObject jo = new JObject(); 50 JArray jmonth = new JArray(); 51 JArray ja = new JArray(); 52 int count; 53 for (int i = 1; i < 13; i++) 54 { 55 jmonth.Add(i + "月"); 56 } 57 if (ds != null && ds.Rows.Count > 0) 58 { 59 for (int i = 0; i < 12; i++) 60 { 61 count = Convert.IsDBNull(ds.Rows[0][i]) ? 0 : Convert.ToInt32(ds.Rows[0][i]); 62 ja.Add(count); 63 } 64 } 65 else 66 { 67 ja.Add(0); 68 } 69 jo.Add("jmonth", jmonth); 70 jo.Add("monthCount", ja); 71 return jo; 72 } 73 /// <summary> 74 /// 构建JSON字符串(饼状统计图) 75 /// </summary> 76 /// <param name="dt"></param> 77 /// <returns></returns> 78 public JArray GetBing(DataTable ds) 79 { 80 JArray jo = new JArray(); 81 JArray ja = new JArray(); 82 if (ds != null && ds.Rows.Count > 0) 83 { 84 for (int i = 1; i < 13; i++) 85 { 86 ja = new JArray(); 87 int one = Convert.IsDBNull(ds.Rows[0][i - 1]) ? 0 : Convert.ToInt32(ds.Rows[0][i - 1]); 88 ja.Add("" + i + ""); 89 ja.Add(one); 90 jo.Add(ja); 91 } 92 } 93 else 94 { 95 ja.Add(0); 96 ja.Add(0); 97 ja.Add(0); 98 ja.Add(0); 99 ja.Add(0); 100 ja.Add(0); 101 ja.Add(0); 102 ja.Add(0); 103 ja.Add(0); 104 ja.Add(0); 105 ja.Add(0); 106 ja.Add(0); 107 } 108 return jo; 109 } 110 }
线性统计图
饼形统计
js文件引用的http://www.hcharts.cn/demo/index.php?p=27里面的，
数据库连接语句好人查询语句，可以自己改动
