昨天花了一天的时间学习了一下highcharts，基本的内容差不多都看了一遍，然后试着写了一个完整的demo，期间可谓百转千回，费了不少功夫，最终还是实现了我所想要的效果图，接下来我将如何实现统计图的过程给大家说一下。效果图如下：
尽管样子不是那么好看，但还是蛮有成就感的。
好了接下来我来说一下如何实现，这里我先说下我实现的过程：首先，我通过前台发送ajax请求，请求后台进行查询，将查询结果先用dataTable保存，然后在转换成json对象，前台接受到后台返回的结果json对象，然后进行json数组的构建，构建完成后，，然后将构建的字符串“似json数组”（注意这里并非是真正的json数组，实际为字符串，这里我叫它“似json数组”,也可以认为js数组），最后通过JSON.parse()函数进行字符串转json数组。
先看一下我的前台代码：
js代码段：
$(function() {$.ajax({type: "GET",url: "../RequestHandler.aspx?_rtype=ajax&_class=RM.Webapp.Org.Map&_method=staticsPopulation&parentOrg=33708000000000000&niandu=2015",//dataType: "json",//有无都不起作用error: function() {alert("aaa");},//返回的response是一个json对象，但是此时的json对象并不是我们所要的格式,我们需要的是json数组格式。success: function(response) {//st必须先进行定义，否则会在st前边出现undefined。var x = "";var y = "";var str = "";var responsestr = "";var region = "";var regionStr = "";//构造data格式[[x1,y1],[x2,y2]…],特别注意的是这里构造完的是字符串for (var i = 0; i < response.length; i++) {responsestr = "[" + "\&;" + response[i].regionFullName + "\&;" + "," + response[i].population;//构建xAxis中categories['x1','x2','x3'…]region = region + "\&;" + response[i].regionFullName + "\&;";if (i < response.length – 1) {responsestr = responsestr + "],";region = region + ",";}else {responsestr = responsestr + "]";}str = str + responsestr;}responsestr = "[" + str + "]";regionStr = "[" + region + "]";//将字符串转换成json数组格式，直接序列化。然后将此序列化的值赋给series中的datavar x = JSON.parse(responsestr);//将字符串转换成json数组格式，。var y = JSON.parse(regionStr);$("#show").highcharts({chart: {type: 'column',style: {fontSize: '18px',fontWeight: 'bold',color: 'blue'}},title: {text: '济宁市各县市区人口数统计图'},subtitle: {text: '2015年'},xAxis: {title: '行政区',//categories:['任城区','曲阜市']categories: y,gridLineWidth: 1//设置x轴上的垂线},yAxis: {title: '人口数',gridLineDashStyle: 'dash', //y轴默认gridLineWidth：1，这里设置y轴垂线的样式//labels: {// step:2//这段代码是设置y轴在原有刻度的前提下每隔两个格显示一下label值，该值小数无效，取整//}plotLines: [{color: "red", //官网上是单引号，双引号也是可以的dashStyle: 'solid',value: 30,width: 3}]},series: [{name: '人数',data: x}],credits: {enabled: false}});}});});html代码段：<body><div id="show"></div></body>请求部分： type: "GET",url: "../RequestHandler.aspx?_rtype=ajax&_class=RM.Webapp.Org.Map&_method=staticsPopulation&parentOrg=33708000000000000&niandu=2015",
这段请求目的是为了一ajax方式进行向后台发送请求到method=staticsPopulaiton函数中，并传递两个参数给后台，至于RequestHandler.aspx中的内容我就不多说了大家可以自己百度一下如何请求。
构建highcharts图形代码：
$("#show").highcharts({chart: {type: 'column',style: {fontSize: '18px',fontWeight: 'bold',color: 'blue'}},title: {text: '济宁市各县市区人口数统计图'},subtitle: {text: '2015年'},xAxis: {title: '行政区',//categories:['任城区','曲阜市']categories: y,gridLineWidth: 1//设置x轴上的垂线},yAxis: {title: '人口数',gridLineDashStyle: 'dash', //y轴默认gridLineWidth：1，这里设置y轴垂线的样式//labels: {// step:2//这段代码是设置y轴在原有刻度的前提下每隔两个格显示一下label值，该值小数无效，取整//}plotLines: [{color: "red", //官网上是单引号，双引号也是可以的dashStyle: 'solid',value: 30,width: 3}]},series: [{name: '人数',data: x}],credits: {enabled: false}});在里面我已经做了备注，有疑问的查看一下api就可以了，这里我想着重说明json数据传递给前台，如何实现highcharts图形。前台我们已经准备好了，接下来就看一下后台的实现。
后台实现代码：
#region 变量说明////用于查询String commandText, retMsg;Boolean execRight;//用于保存从查询字符串获取的信息String parentOrg="";Int32 year;//String fileName = "";//String content;//String commandText = "";DataTable dataTable = new DataTable();// String fileContent = "";#endregion#region 先对传递过来的数据进行编码page.Request.ContentEncoding = System.Text.Encoding.UTF8;#endregionparentOrg = page.Request.Params["parentOrg"];year = Convert.ToInt32(page.Request.Params["niandu"]);commandText = "use organization select population ,regionFullName from regionXian where parentOrg='{0}' and year={1}";commandText = string.Format(commandText, parentOrg, year);dataTable = dataEngine.Select(commandText, out execRight, out retMsg);//声明JavaScript序列化对象System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();// 定义一个list<Dictionary>类型的数组，该数组用于记录Dictionary类型的键值对.string类型记录列名，object类型记录每行中各列值List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();//创建一行的每列键值对对象Dictionary<string, object> row;foreach (DataRow dr in dataTable.Rows){row = new Dictionary<string, object>();foreach (DataColumn dc in dataTable.Columns){row.Add(dc.ColumnName, dr[dc]);}rows.Add(row);}page.Response.ContentType = "application/json";page.Response.ContentEncoding = System.Text.Encoding.UTF8;page.Response.Write(serializer.Serialize(rows));page.Response.End();查询的过程我就不多说了，这里我只是将查询写成了一个DataEngine数据引擎类。将查询结果保存到DataTable中，然后转换成json对象，在c#中，有专门的序列化javascript对象（json也属于JavaScript，因此这里也可以特指json对象）System.Web.Script.Serialization.JavaScriptSerializer，因为我们知道json对象是key/value对出现的，因此我们要构建这样的一个JavaScript对象，Dictionary类就是创建key/value对，来构造json对象（属性名：值）。通过两个for循环便可以实现所有行的所有列key/value json对象的实现，然后返回给前台。这里需要说明两天返回的类型和返回的编码要注意一下。
好了后台我们就完成了，接下来便是我们前台如何接受这些从后台传递过来的json对象了。我们都知道ajax中有一个叫callback的函数，也就是说我们请求完了需要返回处理。
为我祈祷平安就好。我的旅行，会有你们的故事陪伴，所以我不会孤单。放心吧。
