您的位置：首页 > Web前端 > JavaScript

highCharts怎样实现json数组数据的图形展示

2017-05-07 08:38 381 查看
昨天花了一天的时间学习了一下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中的data
var 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;
#endregion
parentOrg = 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对出现的。因此我们要构建这种一个json对象，Dictionary类就是创建key/value对，来构造json对象（属性名：值）。通过两个for循环便能够实现全部行的全部列key/value
json对象的实现，然后返回给前台。这里须要说明两天返回的类型和返回的编码要注意一下。

多说一点key：是字符串，value：可能是数值也可能是字符串。因此这里设置成了object类型。

注：

page.Response.ContentType = "application/json";


这段代码很重要，由于我们serializer.Serialize(rows)

后是将List对象转换成了字符串，这里是json字符串，假设我们类型改成plain或者其他，将会在前台出现错误。由于我们传递过去response是一个对象。远在是我们调用了它的属性。

所以应该是一个json对象，假设不是这个类型，将会传递一个json字符串。

设置断点看一下response类型：



好了后台我们就完毕了。接下来便是我们前台怎样接受这些从后台传递过来的json对象了。

我们都知道ajax中有一个叫callback的函数。也就是说我们请求完了须要返回处理。

通过highcharts 官网我们能够知道，构建图形的数据主要存储到series中的data中，data的定义方式例如以下：


这里我在最初的代码中使用了另外一种方式。也就是说。我构建的是[[,],[,]..]这样的类型的data（实际上我这里仅仅须要构建y值就能够了，用第一种data方式，构建方法如构建categories）。可是光构建这个还远远不够。由于你会发现教程中也说了，x轴会以自增的方式显示。从0開始。显示效果图例如以下：



这并非我们想要的效果图，我们须要的是x轴有我们自己传递过来的数据。

通过查看api，我们发现样例都是通过单独构建x轴来实现的，因此我们能够构建js数组categories来实现x轴坐标。构建data和categories代码例如以下：

//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中的data
var x = JSON.parse(responsestr);
//将字符串转换成json数组格式，。

var y = JSON.parse(regionStr);


这样便实现了我们想要的效果图。

-----网此文能帮助到你

共享万岁。！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航