首页 > 代码库 > 点滴积累【C#】---Highcharts图形统计

点滴积累【C#】---Highcharts图形统计

效果:

思路:

后台获取数据!然后拼接为前台所要求的格式,再将拼接好的StringBuilder给了hidden控件! 然后前台获取JQuery获取Hidden的值,最后将值赋给图形!

代码:

  【前台】

  1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Statistical.aspx.cs" Inherits="Demo.Statistical" %>  2   3 <!DOCTYPE html>  4   5 <html xmlns="http://www.w3.org/1999/xhtml">  6 <head runat="server">  7     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  8     <title></title>  9     <script src="JS/Highcharts/jquery-1.5.2.min.js"></script> 10     <script src="JS/Highcharts/highcharts.js"></script> 11     <script src="JS/Highcharts/theme/grid.js"></script> 12     <script type="text/javascript"> 13         var index = 0; 14         $(document).ready(function () { 15             // Loadpie(); 16             LodaChartData(column);  //line 17             //点击切换图表 18             $("#SeriesType").click(function () { 19                 var type = [areaspline, line, scatter, column]; 20                 for (var i = 0; i < type.length; i++) { 21                     if (index == i) { 22                         LodaChartData(type[index]); 23                         index++; 24                         if (index == 4) { 25                             index = 0; 26                         } 27                         return false; 28                     } 29                 } 30             }); 31         }); 32         function LodaChartData(SeriesType) { 33             var hititle = $("#hititle").val(); 34             var hidate = $("#hidate").val(); 35             var hicontent = $("#hicontent").val(); 36             var chart = new Highcharts.Chart({ 37                 chart: { 38                     renderTo: container,          //放置图表的容器 39                     plotBackgroundColor: "#fff", 40                     plotBorderWidth: null, 41                     defaultSeriesType: SeriesType   //图表类型line, spline, area, areaspline, column, bar, pie , scatter  42                 }, 43                 title: { 44                     //text: ‘短信发送情况‘ 45                     text: hititle 46                 }, 47                 xAxis: {//X轴数据 48                     //categories: [‘一月份‘, ‘二月份‘, ‘三月份‘, ‘四月份‘, ‘五月份‘, ‘六月份‘, ‘七月份‘, ‘八月份‘, ‘九月份‘, ‘十月份‘, ‘十一月份‘, ‘十二月份‘], 49                     categories: eval(hidate), 50                     labels: { 51                         rotation: -45, //字体倾斜 52                         align: right, 53                         style: { fontsize: normal 19px 宋体 } 54                     } 55                 }, 56                 yAxis: {//Y轴显示文字 57                     title: { 58                         text: 发送量/条 59                     } 60                 }, 61                 tooltip: { 62                     enabled: true, 63                     formatter: function () { 64                         return <b> + this.x + </b><br/> + this.series.name + :  + Highcharts.numberFormat(this.y, 1); 65                     } 66                 }, 67                 plotOptions: { 68                     column: { 69                         dataLabels: { 70                             enabled: true 71                         }, 72                         enableMouseTracking: true//是否显示title 73                     } 74                 }, 75                 series: eval(hicontent) 76                 //series: [{ 77                 //    name: ‘通道1‘, 78                 //    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6] 79                 //}, { 80                 //    name: ‘通道2‘, 81                 //    data: [4.0, 2.9, 5.5, 24.5, 18.4, 11.5, 35.2, 36.5, 23.3, 38.3, 23.9, 3.6] 82                 //}, { 83                 //    name: ‘通道3‘, 84                 //    data: [14.0, 12.9, 15.5, 14.5, 28.4, 21.5, 15.2, 16.5, 13.3, 28.3, 13.9, 13.6] 85                 //}, { 86                 //    name: ‘通道4‘, 87                 //    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8] 88                 //}] 89             }); 90         } 91         //JQuery饼图演示 92         function Loadpie() { 93             var chart = new Highcharts.Chart({ 94                 chart: { 95                     renderTo: piecontainer, 96                     plotBackgroundColor: null, 97                     plotBorderWidth: null, 98                     defaultSeriesType: pie 99                 },100                 title: {101                     text: ‘‘102                 },103                 tooltip: {104                     formatter: function () {105                         return <b> + this.point.name + </b>:  + this.percentage +  %;106                     }107                 },108                 plotOptions: {109                     pie: {110                         allowPointSelect: true, //点击切换111                         cursor: pointer,112                         dataLabels: {113                             enabled: true,114                             color: Highcharts.theme.textColor || #000000,115                             connectorColor: Highcharts.theme.textColor || #000000,116                             formatter: function () {117                                 return <b> + this.point.name + </b>:  + this.percentage +  %;118                             }119                         },120                         showInLegend: true121                     }122                 },123                 series: [{124                     data: [125                         [成功, 20],126                         [失败, 20],127                         [其它, 60],128                     ]129                 }]130             });131         }132     </script>133 </head>134 <body>135     <form id="form1" runat="server">136         <asp:HiddenField ID="hidate" runat="server" />137         <asp:HiddenField ID="hititle" runat="server" />138         <asp:HiddenField ID="hicontent" runat="server" />139         <div >140             <div >141                 <%--<div style="float: left; font-size: x-small;">142                     <img src="/Images/16/chart_bar.png" alt="" width="20" height="20" />143                     发送统计144                 </div>--%>145                 <div id="SeriesType" title="点击切换图表" style="float: right; padding-right: 10px; font-size: x-small; cursor: pointer;">更多图表</div>146             </div>147             <div style="height: 30px"></div>148             <div  style="height: 300px;">149                 <div id="container" style="height: 300px;">150                 </div>151             </div>152         </div>153     </form>154 </body>155 </html>

  【后台】

  1 using System;  2 using System.Collections.Generic;  3 using System.Data;  4 using System.Linq;  5 using System.Text;  6 using System.Web;  7 using System.Web.UI;  8 using System.Web.UI.WebControls;  9  10 namespace Demo 11 { 12     public partial class Statistical : System.Web.UI.Page 13     { 14         protected void Page_Load(object sender, EventArgs e) 15         { 16             hititle.Value = http://www.mamicode.com/"报表统计"; 17             getData(); 18         } 19         //获得数据 20         void getData() 21         { 22             DataTable dt = getTable(); 23             if (dt != null) 24             { 25                 StringBuilder sbDate = new StringBuilder(); 26                 sbDate.Append("["); 27                 string strDate = ""; 28                 //将table中的时间遍历到图形里面(拼接为它所要求的格式) 29                 foreach (DataRow dr in dt.Rows) 30                 { 31                     if (strDate == "") 32                     { 33                         strDate = "" + dr["allDate"].ToString() + ""; 34                     } 35                     else 36                     { 37                         strDate += ",‘" + dr["allDate"].ToString() + ""; 38                     } 39                 } 40                 sbDate.Append(strDate); 41                 sbDate.Append("]"); 42                 hidate.Value = http://www.mamicode.com/sbDate.ToString();   //将值给Hidden 43  44                 //将table中的数据遍历到图形里面(拼接为它所要求的格式) 45                 StringBuilder sbData = http://www.mamicode.com/new StringBuilder(); 46                 sbData.Append("["); 47                 string strsuccess = ""; 48                 string strerror = ""; 49                 string strother = ""; 50                 foreach (DataRow dr in dt.Rows) 51                 { 52                     if (!string.IsNullOrEmpty(dr["success"].ToString())) 53                     { 54                         if (strsuccess == "") 55                         { 56                             strsuccess = dr["success"].ToString(); 57                         } 58                         else 59                         { 60                             strsuccess += "," + dr["success"].ToString(); 61                         } 62                     } 63                     if (!string.IsNullOrEmpty(dr["error"].ToString())) 64                     { 65                         if (strerror == "") 66                         { 67                             strerror = dr["error"].ToString(); 68                         } 69                         else 70                         { 71                             strerror += "," + dr["error"].ToString(); 72                         } 73                     } 74                     if (!string.IsNullOrEmpty(dr["other"].ToString())) 75                     { 76                         if (strother == "") 77                         { 78                             strother = dr["other"].ToString(); 79                         } 80                         else 81                         { 82                             strother += "," + dr["other"].ToString(); 83                         } 84                     } 85                 } 86                 sbData.Append("{name:‘发送成功‘,data:[" + strsuccess + "]},{name:‘发送其他‘,data:[" + strother + "]},{name:‘发送失败‘,data:[" + strerror + "]}"); 87                 sbData.Append("]"); 88                 hicontent.Value = http://www.mamicode.com/sbData.ToString();    //将值给Hidden 89             } 90             else 91             { 92                 hidate.Value = http://www.mamicode.com/"[]"; 93                 hicontent.Value = http://www.mamicode.com/"[]"; 94             } 95         } 96         //构造table 97         public DataTable getTable() 98         { 99             DataTable dt = new DataTable();100             dt.Columns.Add("allDate", typeof(System.String));101             dt.Columns.Add("success", typeof(System.String));102             dt.Columns.Add("error", typeof(System.String));103             dt.Columns.Add("other", typeof(System.String));104             DataRow dr = dt.NewRow();105             dr["allDate"] = "2014年1月";106             dr["success"] = "23";107             dr["error"] = "38";108             dr["other"] = "24";109             dt.Rows.Add(dr);110             DataRow dr1 = dt.NewRow();111             dr1["allDate"] = "2014年2月";112             dr1["success"] = "43";113             dr1["error"] = "34";114             dr1["other"] = "42";115             dt.Rows.Add(dr1);116             DataRow dr2 = dt.NewRow();117             dr2["allDate"] = "2014年3月";118             dr2["success"] = "56";119             dr2["error"] = "34";120             dr2["other"] = "7";121             dt.Rows.Add(dr2);122             DataRow dr3 = dt.NewRow();123             dr3["allDate"] = "2014年4月";124             dr3["success"] = "67";125             dr3["error"] = "4";126             dr3["other"] = "5";127             dt.Rows.Add(dr3);128             DataRow dr4 = dt.NewRow();129             dr4["allDate"] = "2014年5月";130             dr4["success"] = "76";131             dr4["error"] = "56";132             dr4["other"] = "34";133             dt.Rows.Add(dr4);134             DataRow dr5 = dt.NewRow();135             dr5["allDate"] = "2014年6月";136             dr5["success"] = "87";137             dr5["error"] = "23";138             dr5["other"] = "15";139             dt.Rows.Add(dr5);140             DataRow dr6 = dt.NewRow();141             dr6["allDate"] = "2014年7月";142             dr6["success"] = "34";143             dr6["error"] = "52";144             dr6["other"] = "76";145             dt.Rows.Add(dr6);146             DataRow dr7 = dt.NewRow();147             dr7["allDate"] = "2014年8月";148             dr7["success"] = "22";149             dr7["error"] = "32";150             dr7["other"] = "12";151             dt.Rows.Add(dr7);152             DataRow dr8 = dt.NewRow();153             dr8["allDate"] = "2014年9月";154             dr8["success"] = "44";155             dr8["error"] = "32";156             dr8["other"] = "15";157             dt.Rows.Add(dr8);158             DataRow dr9 = dt.NewRow();159             dr9["allDate"] = "2014年10月";160             dr9["success"] = "66";161             dr9["error"] = "13";162             dr9["other"] = "21";163             dt.Rows.Add(dr9);164             DataRow dr10 = dt.NewRow();165             dr10["allDate"] = "2014年11月";166             dr10["success"] = "55";167             dr10["error"] = "41";168             dr10["other"] = "11";169             dt.Rows.Add(dr10);170             DataRow dr11 = dt.NewRow();171             dr11["allDate"] = "2014年12月";172             dr11["success"] = "11";173             dr11["error"] = "31";174             dr11["other"] = "26";175             dt.Rows.Add(dr11);176             return dt;177         }178     }179 }

 JS下载地址:

 http://files.cnblogs.com/xinchun/Highcharts.rar