利用ajax做的柱状图，线性统计图，饼状图

柱状图，两个不同类型的数据

以下是html页面代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

     <title></title>

     <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>

     <script src="js/DatePicker/WdatePicker.js" type="text/javascript"></script>

     <script src="js/handlebars.js" type="text/javascript"></script>

     <script src="js/highcharts.js" type="text/javascript"></script>

     <script src="js/exporting.js" type="text/javascript"></script>

     <script src="js/tuxing.js" type="text/javascript"></script>

     <script type="text/javascript">

         function clis() {

             coundan();

             Dindan();

         }

         //柱状

         function coundan() {

             var tu = $("#dd1").val();

             var ends = $("#dd2").val();

 //            alert(tu);

 //            alert(ends);

             $.ajax({

                 type: "POST",

                 url: "CountShow.aspx",

                 data: {

                     method: "dan",

                     str: tu,

                     end: ends

                 },

                 datatype: 'json',

                 success: function (r) {

                     alert(r);

                     if (r.length > ) {

                         var r = $.parseJSON(r);

                             alert(r);

                         ZhuZhuan("tongdan", "订单统计", r.lei, "数量统计", r.countd, "金额统计", r.menoy);

                     }

                 },

                 error: function (XMLHttpRequest, textStatus, errorThrown) { },

                 complete: function (XMLHttpRequest, textStatus) { }

             });

         }

         //饼型

         function Dindan() {

             var tu = $("#dd1").val();

             var ends = $("#dd2").val();

             $.ajax({

                 type: "POST",

                 url: "CountShow.aspx",

                 data: {

                     method: "bingdan",

                     str: tu,

                     end: ends

                 },

                 datatype: 'json',

                 success: function (r) {

                     if (r.length > ) {

                         var r = $.parseJSON(r);

                         Bing("binlist", "订单总额比例", "单数", r,"金额",r);

                     }

                 },

                 error: function (XMLHttpRequest, textStatus, errorThrown) { },

                 complete: function (XMLHttpRequest, textStatus) { }

             });

         }

     </script>

     <style type="text/css">

         .cs

         {

             width: 65px;

         }

         .td

         {

            width:500px;

            height:400px;

             }

     </style>

 </head>

 <body style="overflow: scroll">

     <input type="text"" id="dd1" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})"  class="cs" />

     <input type="text" id="dd2" onfocus="WdatePicker({dateFmt: 'yyyy-MM-dd'})" class="cs" />

         <button id="bbt" onclick="clis()">

             查询</button>

         <div id="tongdan"  class="td">

         </div>

         <div id="binlist"  class="td">

         </div>

 </body>

 </html>

js引用文件其他的几个js文件可以去这个网址下载（http://www.hcharts.cn/demo/index.php?p=27），上面还有很多不同类型的统计（包括源代码）

 /*

  * My97 DatePicker 4.5

  * SITE: http://dp.my97.net

  * BLOG: http://my97.cnblogs.com

  * downlod:http://www.codefans.net

  * MAIL: smallcarrot@163.com

  */

 var $dp,WdatePicker;

 (function(R){var $={

 $wdate:true,

 $dpPath:"",

 $crossFrame:true,

 position:{},

 lang:"auto",

 skin:"default",

 dateFmt:"yyyy-MM-dd",

 realDateFmt:"yyyy-MM-dd",

 realTimeFmt:"HH:mm:ss",

 realFullFmt:"%Date %Time",

 minDate:"1900-01-01 00:00:00",

 maxDate:"2099-12-31 23:59:59",

 startDate:"",

 alwaysUseStartDate:false,

 yearOffset:,

 isShowWeek:false,

 highLineWeekDay:true,

 isShowClear:true,

 isShowToday:true,

 isShowOthers:true,

 readOnly:false,

 errDealMode:,

 autoPickDate:null,

 qsEnabled:true,

 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==)U=U.parent}catch(P){}}if(!U.$dp)U.$dp={ff:I,ie:S,opera:a,el:null,win:W,status:,defMinDate:$.minDate,defMaxDate:$.maxDate,flatCfgs:[]};Q=U.$dp;if(Q.status==)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=;B<$.length;B++){_=$[B].src.substring(,$[B].src.toLowerCase().indexOf("wdatepicker.js"));A=_.lastIndexOf("/");if(A>)_=_.substring(,A+);if(_)break}return _}function F(F){var E,C;if(F.substring(,)!="/"&&F.indexOf("://")==-){E=U.location.href;C=location.href;if(E.indexOf("?")>-)E=E.substring(,E.indexOf("?"));if(C.indexOf("?")>-)C=C.substring(,C.indexOf("?"));var _="",D="",A="",H,G,B="";for(H=;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==)break;G-=}_=E.substring(G+,E.length);_=_.substring(,_.lastIndexOf("/"));D=C.substring(G+,C.length);D=D.substring(,D.lastIndexOf("/"));break}if(_!="")for(H=;H<_.split("/").length;H++)B+="../";if(D!="")B+=D+"/";F=location.href.substring(,location.href.lastIndexOf("/")+)+B+F}$.$dpPath=F}function M(B,$,D){var A=W[O],E=A[C]("HEAD").item(),_=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=,_=;while($!=U){var D=$.parent[O][C]("iframe");for(var F=;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=;H()}function H(){if(Q.flatCfgs.length>){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)},);return}if(Q.status==){Q.status=;K({el:{innerHTML:""}},true)}else return}else if(E.eCont){E.eCont=Q.$(E.eCont);Q.flatCfgs.push(E);if(Q.status==)H()}else{if(Q.status==)Q.status=;if(Q.status!=)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[];if($&&($+"").indexOf("Event")>=)return $;func=func.caller}return null}return event}}function K(E,_){for(var D in $)if(D.substring(,)!="$")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)>=)){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[],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[],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>))))B=A.top+$.topM+H.top-E-;else B=A.top+$.topM+H.bottom;B+=S?-:}else B+=A.top+$.topM;if(isNaN(F))F=A.left+Math.min($.leftM+H.left,D.width-_-)-(S?:);else F+=A.left+$.leftM;Q.dd.style.top=B+"px";Q.dd.style.left=F+"px"}}})($dp)

js日期文件

这是后台代码

    protected void Page_Load(object sender, EventArgs e)

         {

             classDBOP db = new classDBOP();

             if (!IsPostBack)

             {

                 string strsj = Decode("str").ToString(); //Decode获取ajax里面的参数

                 string enddate = Decode("end").ToString();

                 if (strsj != null && enddate != null)

                 {

                     switch (Decode("method"))

                     {

                         case "dan": //method 方法

                             DataTable dt = db.ExcSql(Ding(strsj, enddate)); //ExcSql是封装好的方法，sql语句的执行，可以自己些数据库连接语句和执行方法

                             JObject jo =Count(dt);

                             Context.Response.ClearContent();

                             Context.Response.Write(jo.ToString());

                             Context.Response.End();

                             break;

                         //case "bingdan":

                         //    dt = db.ExcSql(get.Ding(strsj, enddate));

                         //    JArray ja = get.Dindan(dt);

                         //    Context.Response.ClearContent();

                         //    Context.Response.Write(ja.ToString());

                         //    Context.Response.End();

                         //    break;

                     }

                 }

             }

         }

         /// <summary>

         /// 柱状审核统计

         /// </summary>

         /// <param name="year"></param>

         /// <param name="counts"></param>

         /// <returns></returns>

         public string Ding(string strsj, string endsj)

         {

             string sund = @"select OPState as 类别,count(OPState) as 数量统计, sum(PayMoney) as 金额之和

                     from UUSpotOrder where TicketsType='disney' and   OrderDate between '" + strsj + "'  and '" + endsj + "'group by OPState  order by  count(OPState) asc";

             return sund;

         }

         /// <summary>

         ///订单统计(柱状)

         /// </summary>

         /// <param name="ds"></param>

         /// <returns></returns>

         public JObject Count(DataTable ds)

         {

             JObject obe = new JObject();

             JArray men = new JArray();

             JArray jo = new JArray();

             JArray ja = new JArray();

             if (ds != null && ds.Rows.Count > )

             {

                 for (int i = ; i < ds.Rows.Count; i++)

                 {

                     string lei = Convert.ToString(ds.Rows[i]["类别"]);

                     int one = Convert.ToInt32(ds.Rows[i]["数量统计"]);

                     int meny = Convert.ToInt32(ds.Rows[i]["金额之和"]);

                     ja.Add(lei);

                     jo.Add(one);

                     men.Add(meny);

                 }

                 obe.Add("lei", ja);

                 obe.Add("countd", jo);

                 obe.Add("menoy", men);

             }

             return obe;

         }

　这是js代码

 //线型人数统计显示

 /*

 同一种类型数据

 1.参数 id:标签的id；texts：标题名称；jmonth：所传的横坐标参数；names：自定义名称；

 json：参数；yuan：数据的单位

 2.例子 ShowCount("xianMoney", "2015出游金额统计", r.jmonth, "金额", r.monthCount, "元");

 3.参数格式（这里只是一般的数据，格式一样的）

 {"jmonth": ["2月""3月", "4月""5月","6月"],

   "monthCount": [0,0,2,0, 0,0 ]}

 */

 function ShowCount(id,texts,jmonth,names,json,yuan) {

     $("#"+id).highcharts({

         title: {

             text: texts,

             x: - //center

         },

         subtitle: {

             text: '',

             x: -

         },

         xAxis: {

             categories: jmonth

         },

         yAxis: {

             title: {

                 text: ''

             },

             plotLines: [{

                 value: ,

                 width: ,

                 color: '#808080'

             }]

         },

         tooltip: {

             headerFormat: '<span style="font-size:10px">{point.key}</span><table>',

             pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' + '<td style="padding:0"><b>{point.y}('+ yuan +')</b></td></tr>',

             footerFormat: '</table>',

             shared: true,

             useHTML: true

         },

         legend: {

             layout: 'vertical',

             align: 'right',

             verticalAlign: 'middle',

             borderWidth:

         },

         series: [{

             name: names,

             data: json

         }]

     });

 }

 //饼型统计

 /*

 同一种类型数据

 1.参数 id:标签的id；text：标题名称；name：自定义名称；

 json：参数；

 2.例子Bing("bingMoney", "2015出游金额百分比", "金额", r);

 3.参数格式（这里只是一般的数据，格式一样的）

 {[["1",0],["2",0],["3",35],["4",0],["5",0 ],["6",0]]}

 */

 function Bing( id, text,name,json) {

     $('#' + id).highcharts({

         chart: {

             type: 'pie',

             options3d: {

                 enabled: true,

                 alpha: ,

                 beta:

             }

         },

         title: {

             text: text

         },

         tooltip: {

             pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>'

         },

         plotOptions: {

             pie: {

                 allowPointSelect: true,

                 cursor: 'pointer',

                 depth: ,

                 dataLabels: {

                     enabled: true,

                     format: '{point.name}'

                 }

             }

         },

         series: [{

             type: 'pie',

             name: name,

             data: json

         }]

     });

 }

 //柱状统计图(多个不同数据类型)

 /*

 两种类型数据，也可以多种，在多种的情况下，在添加（name: namet ,data: jsons）

 1.参数 id:标签的id；texts：标题名称；year：所传的横坐标参数；names：第一组自定义名称；

 json：第一组参数；namet：第二组自定义名字；jsons：第二组参数

 2.例子ZhuZhuan("tongdan", "订单统计", r.lei, "数量统计", r.countd, "金额统计", r.menoy);

 3.参数格式

 {"lei": [

 "审闭      ",

 "取消      ",

 "待审      "

 ],

 "countd": [

 5,

 6,

 11

 ],

 "menoy": [

 200,

 0,

 0

 ]

 }

 */

 function ZhuZhuan(id, texts, year,names, json, namet,jsons) {

     $('#'+id).highcharts({

         chart: {

             type: 'column'

         },

         title: {

             text: texts

         },

         subtitle: {

             text: ''

         },

         xAxis: {

             categories:year

         },

         yAxis: {

             min:

         }, 

         tooltip: {

             headerFormat: '<span style="font-size:10px">{point.key}</span><table>',

             pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +

                 '<td style="padding:0"><b>{point.y}</b></td></tr>',

             footerFormat: '</table>',

             shared: true,

             useHTML: true

         },

         plotOptions: {

             column: {

                 pointPadding: 0.2,

                 borderWidth:

             }

         },

         series: [{

             name: names+'(单)', /*单位可以随意改动*/

             data: json

         }, {

             name: namet + '(元)',

             data: jsons

         }]

     });

 }

以下是图片展示

　2.线性统计和饼形（同种类型）

这是html代码和js引用文件

 <script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>

     <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

     <script src="js/DatePicker/WdatePicker.js" type="text/javascript"></script>

     <script type="text/javascript" src="js/highcharts.js"></script>

     <script type="text/javascript" src="js/exporting.js"> </script>

     <script src="js/tuxing.js" type="text/javascript"></script>

     <script type="text/jscript">

         function abc() {

             AjaxCount();

             BingMoney();

         }

         function AjaxCount() {

             //获取人数

             $.ajax({

                 type: "POST",

                 url: "MonthSelect.aspx",

                 data: {

                     method: "monthCount",

                     date: $("#date").val(),  //获取html标签的值

                     selexioa: $("#selexiaos").val(),

                     selextfs: $("#selefs").val()

                 },

                 datatype: 'json',

                 success: function (r) {

                     alert(r);

                     if (r.length > ) {

                         var r = $.parseJSON(r);

                         ShowCount("xianCount", "2015出游人数统计", r.jmonth, " 销售方式", r.monthCount, "人");  //调用tuxing。js里面写好的方法

                     }

                 },

                 error: function (XMLHttpRequest, textStatus, errorThrown) { },

                 complete: function (XMLHttpRequest, textStatus) { }

             })

         }

         //饼型金额

         function BingMoney() {

             var date = $("#date").val();

             //获取后台金额方法

             $.ajax({

                 type: "POST",

                 url: "MonthSelect.aspx",

                 data: {

                     method: "Bing",

                     date: $("#date").val(),

                     selexioa: $("#selexiaos").val(),

                     selextfs: $("#selefs").val()

                 },

                 datatype: 'json',

                 success: function (r) {

                     alert(r);

                     if (r.length > ) {

                         var r = $.parseJSON(r);

                         Bing("bingMoney", "2015出游金额百分比", "金额", r);

                     }

                 },

                 error: function (XMLHttpRequest, textStatus, errorThrown) { },

                 complete: function (XMLHttpRequest, textStatus) { }

             })

         }

 <script>

 <body style="overflow: scroll">

       <input type="text" id="date" onfocus="WdatePicker({dateFmt: 'yyyy'})"  value=""/>

     <select name="selexiaos" id="selexiaos">

         <option value="直销">直销</option>

         <option value="补单">补单</option>

         <option value="分销">分销</option>

     </select>

     <select name="selefs" id="selefs">

         <option value="TU">TU</option>

         <option value="OA">OA</option>

         <option value="TM">TM</option>

     </select>

     <button id="select" onclick="abc();">

         查询</button>

     <div id="xianCount" class="yu">

     </div>

    <%-- <div id="xianMoney" class="yu">

     </div>

      <div id="zhuCount" class="yu">

     </div>

     <div id="zhuMoney" class="yu">

     </div>--%>

     <div id="bingMoney" class="yu">

     </div>

 </body>

js和html代码

后台代码

  public partial class MonthSelect : CTUClassLibrary.Page

     {

         protected void Page_Load(object sender, EventArgs e)

         {

             classDBOP db = new classDBOP();

             Lists get = new Lists();

             string dates = Decode("date").ToString(); //获取ajax的参数值

             string xiao = Decode("selexioa").ToString();

             string fs = Decode("selextfs").ToString();

             if (dates != null)

             {

                 //sql条件语句

                 string countmoney = "sum(Amount)";

                 string counts = "count(Child)+count(Adult)";

                 string zx = " and Drp='" + fs + "' and ISFX='" + xiao + "'";

                 switch (Decode("method"))

                 {

                     case "monthCount": //线性统计图

                         DataTable dt = db.ExcSql(get.XianList(dates, counts, zx));//可以自己写sql语句和数据库连接方式

                         JObject jo = get.GetMonth(dt);

                         Str(jo);

                         break;

                     case "Bing":  //饼形统计

                         dt = db.ExcSql(get.XianList(dates, countmoney, zx));

                         JArray jr = get.GetBing(dt);

                         Context.Response.ClearContent();

                         Context.Response.Write(jr.ToString());

                         Context.Response.End();

                         break;

                 }

             }

         }

         public void Str(JObject jo)

         {

             Context.Response.ClearContent();

             Context.Response.Write(jo.ToString());

             Context.Response.End();

         }

 }

线性和饼形

   public class Lists

     {

         /// <summary>

         /// 线型统计获取金额

         /// </summary>

         /// <param name="year"></param>

         /// <param name="counts"></param>

         /// <returns></returns>

         public string XianList(string year, string counts, string zhixiao)

         {

             string sund = counts + " from CTUOrder  where year(starttime)=" + year;

             //拼接查询语句（sql语句用 with as）

             StringBuilder sb = new StringBuilder();

             sb.Append("with ");

             for (int i = 1; i < 13; i++)

             {

                 sb.Append(" yue" + i + " as(  select  \"" + i + "\"=" + sund + " and  month(getdate())=" + i + " " + zhixiao);

                 if (i == 12)

                 {

                     sb.Append(")");

                 }

                 else

                 {

                     sb.Append("),");

                 }

             }

             sb.Append(" select * from ");

             for (int j = 1; j < 13; j++)

             {

                 if (j == 12)

                 {

                     sb.Append("yue" + j + "");

                 }

                 else

                 {

                     sb.Append("yue" + j + ",");

                 }

             }

             return sb.ToString(); ;

         }

         /// <summary>

         /// 构建JSON字符串(线型统计图)

         /// </summary>

         /// <param name="dt"></param>

         /// <returns></returns>

         public JObject GetMonth(DataTable ds)

         {

             JObject jo = new JObject();

             JArray jmonth = new JArray();

             JArray ja = new JArray();

             int count;

             for (int i = 1; i < 13; i++)

             {

                 jmonth.Add(i + "月");

             }

             if (ds != null && ds.Rows.Count > 0)

             {

                 for (int i = 0; i < 12; i++)

                 {

                     count = Convert.IsDBNull(ds.Rows[0][i]) ? 0 : Convert.ToInt32(ds.Rows[0][i]);

                     ja.Add(count);

                 }

             }

             else

             {

                 ja.Add(0);

             }

             jo.Add("jmonth", jmonth);

             jo.Add("monthCount", ja);

             return jo;

         }

         /// <summary>

         /// 构建JSON字符串(饼状统计图)

         /// </summary>

         /// <param name="dt"></param>

         /// <returns></returns>

         public JArray GetBing(DataTable ds)

         {

             JArray jo = new JArray();

             JArray ja = new JArray();

             if (ds != null && ds.Rows.Count > 0)

             {

                 for (int i = 1; i < 13; i++)

                 {

                     ja = new JArray();

                     int one = Convert.IsDBNull(ds.Rows[0][i - 1]) ? 0 : Convert.ToInt32(ds.Rows[0][i - 1]);

                     ja.Add("" + i + "");

                     ja.Add(one);

                     jo.Add(ja);

                 }

             }

             else

             {

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

                 ja.Add(0);

             }

             return jo;

         }

 }

Getlist方法

线性统计图

饼形统计

js文件引用的http://www.hcharts.cn/demo/index.php?p=27里面的，

数据库连接语句好人查询语句，可以自己改动

利用ajax做的柱状图，线性统计图，饼状图的更多相关文章

利用Tkinter和matplotlib两种方式画饼状图
当我们学习python的时候,总会用到一些常用的模块,接下来我就详细讲解下利用两种不同的方式画饼状图.首先利用[Tkinter]中的canvas画布来画饼状图: from tkinter import ...
用FusionChartsFree做饼状图、柱状图、折线图的实例
1.先来看看要进行表现的页面:myChart.jsp <%@ page language="java" contentType="text/html; charse ...
前端数据统计用做Bootstrap的一些柱状图、饼状图和折线图案例
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootstrap ...
C# 绘制图表（柱状图，线性图，饼状图）
http://blog.csdn.net/gisfarmer/article/details/3736452 Chart饼状图,每根柱子的宽度: int a = Chart1.Series[" ...
Java创建柱状图及饼状图
Java创建图表其实还是很方便的,但是要引入相关的jar包.如下 jfreechart.jar jcommon,jar gnujaxp.jar 其中最主要的是jfreechart.jar. 下面就让我 ...
使用 jfreechart 生成曲线、柱状图、饼状图、分布图展示到JSP
虽然现在JS做报表和图形展示已经非常普遍和漂亮了,但是不能忽略有jfreechart 这样一种东西! 这些翻阅资料,在看以前写的示例时发现了关于jfreechart 的简单示例,不管怎样发上来分享一下 ...
基于SpringMVC框架使用ECharts3.0实现折线图，柱状图，饼状图,的绘制（上篇）
页面部分 <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html> ...
Qt数据可视化（散点图、折线图、柱状图、盒须图、饼状图、雷达图）开发实例
目录散点图折线图柱状图水平柱状图水平堆叠图水平百分比柱状图盒须图饼状图雷达图 Qt散点图.折线图.柱状图.盒须图.饼状图.雷达图开发实例. 在开发过程中我们会使用多各种各样的图 ...
arcgis api for flex之专题图制作（饼状图，柱状图等）
最近公司给我一个任务,就是利用arcgis api for flex实现在地图上点(业务数据)直接显示饼状图以及柱状图的专题图制作,而不是通过点击点显示气泡窗口的形式来实现,这个公司已经实现了. 经过 ...

随机推荐

$(document).ready(function(){})和window.onload=function(){}的比较
这两个函数想必每个前端开发者都不会很陌生,但是很了解用法的人估计就比较少了,博主也是最近才开始注意到这两个函数的区别. 首先$(document).ready(function(){})等同于$(). ...
SqlServer日期查询
一.sql server日期时间函数 Sql Server中的日期与时间函数 1. 当前系统日期.时间 select getdate() 2. dateadd 在向指定日期加上一段时间的基础上,返 ...
Java 枚举随笔
public enum Color{ //定义枚举并赋值 RED("红色", 1), Blue("蓝色", 2), Yellow("黄色", ...
GitLab CI
GitLab CI持续集成配置方案目录 1. 持续集成介绍 1.1 概念 1.2 持续集成的好处 2. GitLab持续集成(CI) 2.1 简介 2.2 GitLab简单原理图 2.3 Git ...
"windows 正在启动"
xp 在cmd下使用了control userpasswords2 设定开机不需要密码之后,开机停留在“window正在启动”,无法进入.估计是设置的时候密码输入错误了( 并不会提示你错误:() 在停 ...
【Git】代码托管-从基本设置开始
Git是现在比较火的一款代码托管工具,之前也有在使用GitHub,是用GitHub for windows一个图形管理的界面,如果没有这个图形控制界面的话我估计自己又要放弃了.用BASH命令来实现托管 ...
text-overflow 文字溢出时的设置
text-overflow : clip | ellipsis clip: 不显示省略标记(...),而是简单的裁切. ellipsis: 当对象内文本溢出时显示省略标记(...) 设置或检索是否使用 ...
linux服务器之间拷贝文件和文件夹
传输文件用法:scp 本机文件目录远程服务器用户名@服务器IP:/服务器目录示例:
HttpWebResponse类
HttpWebResponse类的作用用于在客户端获取返回的响应的信息,还记得HttpResponse类吗?你是否在写B/S程序的时候,经常用到Response.Write()呢? HttpRespo ...
python手记(45)
python 声音编辑,减少音量 #!/usr/bin/env python # -*- coding: utf-8 -*- #http://blog.csdn.net/myhaspl #code:m ...

利用ajax做的柱状图，线性统计图，饼状图

柱状图，两个不同类型的数据

2.线性统计和饼形（同种类型）

利用ajax做的柱状图，线性统计图，饼状图的更多相关文章

随机推荐

热门专题

　2.线性统计和饼形（同种类型）