点滴积累【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: true
121                     }
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 = "报表统计";
 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 = sbDate.ToString();   //将值给Hidden
 43 
 44                 //将table中的数据遍历到图形里面（拼接为它所要求的格式）
 45                 StringBuilder sbData = 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 = sbData.ToString();    //将值给Hidden
 89             }
 90             else
 91             {
 92                 hidate.Value = "[]";
 93                 hicontent.Value = "[]";
 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