点滴积累【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下载地址：