首页 > 代码库 > 点滴积累【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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。