显示HighCharts并显示到表格上(分页)
<script src="../Content/Scripts/js/highcharts.js"></script>
<script src="../Content/Scripts/js/highcharts-more.js"></script>
<script src="../Content/Scripts/js/modules/exporting.js"></script>
<link href="../Content/Scripts/js/jbox/Skins/Blue/jbox.css" rel="stylesheet" />
<script src="../Content/Scripts/js/jbox/jquery.jBox-2.3.min.js"></script>
<script src="../Content/Scripts/js/jbox/i18n/jquery.jBox-zh-CN.js"></script>
<script src="/Content/Scripts/AJAXScript.js" charset="utf-8"></script>
导包
<script type="text/javascript">
var name = "";
var Action = "";
$(function () {
showJSON();//为第一个饼图赋值
showJSON2();//为第二个饼图赋值
Chart1();//第一个饼状图
Chart2();//第二个饼图
Chart3();//柱形图
})
function Chart1() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
backgroundColor: '#f7f8ec',
plotBorderWidth: 1,
plotBackgroundColor: '#ffffff',
shadow: true,
borderRadius: 10,
height: 350,
width: 500
, plotShadow: true
},
exporting: {
enabled: false
},
title: {
text: '信访事项分类按区县统计'
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
}
},
events: {
click: function (event) {
//alert('x: ' + event.arr[0].value + ', y: ' +
// event.yAxis[0].value);
//var url = '/Report/OpenWeb/XF_QUXIAN.aspx?name=' + name ;
//window.showModalDialog(url, "dialogWidth=1000px;dialogHeight=768px;");
name = unescape(event.point.name);//条件
Action = "XF_QUXIAN"
//弹出div
myDialog = art.dialog({
title: name,
content: document.getElementById("divUpdateUser"),//div ID
id: 'EF893L32',
lock: true,
fixed: true,
esc: false,
padding: 0,
width:300
});
ShowPie1(name, Action);
}
},
showInLegend: false
}
},
series: [{
type: 'pie',
data: arr
}],
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92',
'#000000'
]
});
}
function Chart2() {
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container1',
plotBackgroundColor: null,
plotBorderWidth: null,
backgroundColor: '#f7f8ec',
plotBorderWidth: 1,
plotBackgroundColor: '#ffffff',
shadow: true,
borderRadius: 10,
height: 350,
width: 500
, plotShadow: true
},
exporting: {
enabled: false
},
title: {
text: '信访事项分类按问题统计'
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
}
},
events: {
click: function (event) {
//alert('x: ' + event.arr[0].value + ', y: ' +
// event.yAxis[0].value);
//var url = '/Report/OpenWeb/XF_QUXIAN.aspx?name=' + name ;
//window.showModalDialog(url, "dialogWidth=1000px;dialogHeight=768px;");
name = unescape(event.point.name);//条件
Action = "XF_WenTi"
//弹出div
myDialog = art.dialog({
title: name,
content: document.getElementById("divUpdateUser2"),//div ID
id: 'EF893L32',
lock: true,
fixed: true,
esc: false,
padding: 0,
width: 300,
height: 200
});
ShowPie2(name, Action);
}
},
showInLegend: false
}
},
series: [{
type: 'pie',
data: arr2
}],
colors: [
'#4572A7',
'#AA4643',
'#89A54E',
'#80699B',
'#3D96AE',
'#DB843D',
'#92A8CD',
'#A47D7C',
'#B5CA92',
'#000000'
]
});
}
var arr;
function showJSON() {
arr = new Array();
var data = AjaxJsonSynchro("HighchartsAjax.ashx", { Action: "V_PetitionByArea_QuXian" });
$(data).each(function (index) {
arr[index] = { "name": unescape($(this).attr("Petition_area")), y: parseInt($(this).attr("Petition_rate")) };
});
}
var arr2;
function showJSON2() {
arr2 = new Array();
var data = AjaxJsonSynchro("HighchartsAjax.ashx", { Action: "V_PetitionByPro_WenTi" });
$(data).each(function (index) {
arr2[index] = { "name": unescape($(this).attr("Petition_problem")), y: parseInt($(this).attr("Petition_num")) };
});
}
function Chart3() {
var chart3 = new Highcharts.Chart({
chart: {
renderTo: 'container3',
type: 'bar',
backgroundColor: '#f7f8ec',
plotBorderWidth: 1,
plotBackgroundColor: '#ffffff',
shadow: true,
borderRadius: 10,
height: 500
, plotShadow: false
},
exporting: {
enabled: false
},
title: {
text: '盐城市信访事项分类按目的统计'
},
xAxis: {
categories: ['意见建议', '申诉', '求决', '其他', '揭发检举'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: '',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: null
});
$.ajax({
url: "HighchartsAjax.ashx",
data: { Action: "V_PetitionByPur" },
cache: false
}).success(function (data) {
for (i = 0; i < data.length; i++) {
chart3.addSeries(data[i]);
}
});
}
function ShowPie1(name, Action) {
$("#gridTable1").setGridParam({ "page": 1 });
$("#gridTable1").jqGrid('setGridParam',
{
postData: {
Ram: Math.random(),
Action: Action,
name: name
}
}).trigger('reloadGrid');
$("#gridTable1").jqGrid({
caption: "详细信息",
url: "/Report/HighchartsAjax.ashx", //数据源
datatype: "json", //数据源类型
height: "240px",
fontsize:"20px",
colNames: ['信访时间', '信访分类', '信访方式', '事件类型', '信访问题'],
colModel: [
{ name: 'Petition_date', index: 'Petition_date', align: "center", sorttype: "text" },
{ name: 'Petition_category', index: 'Petition_category', align: "center", sorttype: "text" },
{ name: 'Petition_type', index: 'Petition_type', align: "center", sorttype: "date" },
{ name: 'Event_type', index: 'Event_type', align: "center", sorttype: "text" },
{ name: 'Petition_problem', index: 'Petition_problem', align: "center", sorttype: "text" },
],
sortname: 'Petition_date',
sortorder: 'DESC',
sortable: true,
postData: {
Ram: Math.random(),
Action: Action,
name: name
},
jsonReader: {
page: "page",
total: "total",
repeatitems: false //如果设为false,则jqGrid在解析json时,会根据name(colmodel 指定的name)来搜索对应的数据元素(即可以json中元素可以不按顺序)
},
pager: "#gridpager", //分页层的id
rowNum: 10, //每页显示多少条
rowList: [10, 20, 30], //下边出现的下拉框可以选择的页数
gridComplete: function () { //在此事件中循环为每一行添加修改和删除链接
var ids = jQuery("#gridTable1").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var Time=unescape($("#gridTable1").jqGrid("getCell", id, "Petition_date"))
var STM=Time.substring(0,4) +"年"+Time.substring(4,6)+"月"+Time.substring(6,8)+"日"
$("#gridTable1").jqGrid('setRowData', id, { Petition_date:STM });
$("#gridTable1").jqGrid('setRowData', id, { Petition_category: unescape($("#gridTable1").jqGrid("getCell", id, "Petition_category")) });
$("#gridTable1").jqGrid('setRowData', id, { Petition_type: unescape($("#gridTable1").jqGrid("getCell", id, "Petition_type")) });
$("#gridTable1").jqGrid('setRowData', id, { Event_type: unescape($("#gridTable1").jqGrid("getCell", id, "Event_type")) });
$("#gridTable1").jqGrid('setRowData', id, { Petition_problem: unescape($("#gridTable1").jqGrid("getCell", id, "Petition_problem")) }); }
}
});
}
function ShowPie2(name, Action) {
$("#gridTable2").setGridParam({ "page": 1 });
$("#gridTable2").jqGrid('setGridParam',
{
postData: {
Ram: Math.random(),
Action: Action,
name: name
}
}).trigger('reloadGrid');
$("#gridTable2").jqGrid({
caption: "详细信息",
url: "/Report/HighchartsAjax.ashx", //数据源
datatype: "json", //数据源类型
height:"240px",
colNames: ['信访时间', '信访分类', '信访方式', '事件类型', '信访区县'],
colModel: [
{ name: 'Petition_date', index: 'Petition_date', align: "center", sorttype: "text" },
{ name: 'Petition_category', index: 'Petition_category', align: "center", sorttype: "text" },
{ name: 'Petition_type', index: 'Petition_type', align: "center", sorttype: "date" },
{ name: 'Event_type', index: 'Event_type', align: "center", sorttype: "text" },
{ name: 'Petition_area', index: 'Petition_area', align: "center", sorttype: "text" },
],
sortname: 'Petition_date',
sortorder: 'DESC',
sortable: true,
postData: {
Ram: Math.random(),
Action: Action,
name: name
},
jsonReader: {
page: "page",
total: "total",
repeatitems: false //如果设为false,则jqGrid在解析json时,会根据name(colmodel 指定的name)来搜索对应的数据元素(即可以json中元素可以不按顺序)
},
pager: "#gridpager3", //分页层的id
rowNum: 10, //每页显示多少条
rowList: [10, 20, 30], //下边出现的下拉框可以选择的页数
gridComplete: function () { //在此事件中循环为每一行添加修改和删除链接
var ids = jQuery("#gridTable2").jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var Time = unescape($("#gridTable2").jqGrid("getCell", id, "Petition_date"))
var STM = Time.substring(0, 4) + "年" + Time.substring(4, 6) + "月" + Time.substring(6, 8) + "日"
$("#gridTable2").jqGrid('setRowData', id, { Petition_date: STM });
$("#gridTable2").jqGrid('setRowData', id, { Petition_category: unescape($("#gridTable2").jqGrid("getCell", id, "Petition_category")) });
$("#gridTable2").jqGrid('setRowData', id, { Petition_type: unescape($("#gridTable2").jqGrid("getCell", id, "Petition_type")) });
$("#gridTable2").jqGrid('setRowData', id, { Event_type: unescape($("#gridTable2").jqGrid("getCell", id, "Event_type")) });
$("#gridTable2").jqGrid('setRowData', id, { Petition_area: unescape($("#gridTable2").jqGrid("getCell", id, "Petition_area")) });
}
}
});
}
</script>
jquery部分
HighchartsAjax 部分
HighchartsAjax.ashx文件进行处理
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "json";
if (context.Request["Action"] != null)
{
switch (context.Request["Action"])
{
case "V_PetitionTrend1"://趋势线型图
V_PetitionTrendSet();
break;
case "V_PetitionTrend2"://趋势柱状图
V_PetitionTrendSet();
break;
case "V_PetitionByArea_QuXian"://分类统计饼状图按区县查看
V_PetitionByArea_QuXianSet();
break;
case "V_PetitionByPro_WenTi"://分类统计饼状图按问题查看
V_PetitionByPro_WenTiSet();
break;
case "V_PetitionByPur"://盐城市信访事项分类按目的统计
V_PetitionByPurSet();
break;
case "V_PetitionEvent"://盐城市信访事件分类趋势分析线型图
V_PetitionEventSet();
break;
case "V_PetitionResolveByMonth_JinJing"://进京上访办结按月份查看
V_PetitionResolveByMonth_JinJingSet();
break;
case "V_PetitionResolveByArea_JinJing"://进京上访办结按区县查看
V_PetitionResolveByArea_JinJingSet();
break;
case "V_PetitionResolveByMonth_WeiFa"://违法打击按月份查看你
V_PetitionResolveByMonth_WeiFaSet();
break;
case "V_PetitionResolveByArea_WeiFa"://违法打击按区县查看
V_PetitionResolveByArea_WeiFaSet();
break;
case "V_PetitionResolveByMonth_JiAn"://信访积案按月份查看
V_PetitionResolveByMonth_JiAn();
break;
case "V_PetitionResolveByArea_JiAn"://信访积案按区县查看
V_PetitionResolveByArea_JiAn();
break;
case "V_PetitionTotal_Z":
V_PetitionTotal_Z_Set();
break;
case "V_PetitionTotal_F":
V_PetitionTotal_F_Set();
break;
case "XF_QUXIAN"://信访事项区县2级钻取
XF_QUXIAN_List();
break;
case "XF_WenTi"://信访事项问题2级钻取
XF_Wenti_List();
break;
}
}
}
#region 盐城市信访趋势分析
/// <summary>
/// 盐城市信访趋势分析
/// </summary>
public void V_PetitionTrendSet()
{
DataTable dt = new V_PetitionTrendDomain().SelectV_PetitionTrend().Tables[0];
var result = from DataRow row in dt.Rows
select
new
{
name = row["Petition_type"].ToString(),
data = ConvertIntArray(row["Petition_num"].ToString().Split(','))
};
HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(result));
}
#endregion
#region 盐城市信访事项分类统计
/// <summary>
/// 盐城市信访事项分类按区县统计
/// </summary>
public void V_PetitionByArea_QuXianSet()
{
DataTable dt = new V_PetitionByAreaDomain().SelectV_PetitionByArea().Tables[0];
HttpContext.Current.Response.Write(TypeChange(dt));
}
/// <summary>
/// 盐城市信访事项分类按问题统计
/// </summary>
public void V_PetitionByPro_WenTiSet()
{
DataTable dt = new V_PetitionByProDomain().SelectV_PetitionByPro().Tables[0];
HttpContext.Current.Response.Write(TypeChange(dt));
}
/// <summary>
/// 盐城市信访事项分类按目的统计
/// </summary>
/// <param name="dt"></param>
/// <returns></returns>
public void V_PetitionByPurSet()
{
DataTable dt = new V_PetitionByPurDomain().SelectV_PetitionByPur().Tables[0];
var result = from DataRow row in dt.Rows
select
new
{
name = row["Petition_type"].ToString(),
data = ConvertIntArray(row["Petition_pur"].ToString().Split(','))
};
HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(result));
}
#endregion
#region 盐城市信访事件分类趋势分析线型图
public void V_PetitionEventSet()
{
DataTable dt = new V_PetitionEventDomain().SelectV_PetitionEvent().Tables[0];
var result = from DataRow row in dt.Rows
select
new
{
name = row["Event_type"].ToString(),
data = ConvertIntArray(row["Petition_num"].ToString().Split(','))
};
HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(result));
}
#endregion
#region 盐城市进京上访化解率
/// <summary>
/// 进京上访按月份
/// </summary>
public void V_PetitionResolveByMonth_JinJingSet()
{
DataTable dt = new V_PetitionResolveByMonthDomain().SelectV_PetitionResolveByMonth_JinJing().Tables[0];
var result = from DataRow row in dt.Rows
select
new
{
name = row["Petition_result"].ToString(),
data = ConvertIntArray(row["PetitionRate"].ToString().Split(','))
};
HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(result));
}
/// <summary>
/// 进京上访按区县
/// </summary>
public void V_PetitionResolveByArea_JinJingSet()
{
DataTable dt = new V_PetitionResolveByAreaDomain().SelectV_PetitionResolveByArea_JinJing().Tables[0];
var result = from DataRow row in dt.Rows
select
new
{
name = row["Petition_result"].ToString(),
data = ConvertIntArray(row["PetitionRate"].ToString().Split(','))
};
HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(result));
}
#endregion
#region 盐城市涉访违法打击率
/// <summary>
/// 违法打击按月份
/// </summary>
public void V_PetitionResolveByMonth_WeiFaSet()
{
DataTable dt = new V_PetitionResolveByMonthDomain().SelectV_PetitionResolveByMonth_WeiFa().Tables[0];
var result = from DataRow row in dt.Rows
select
new
{
name = row["Petition_result"].ToString(),
data = ConvertIntArray(row["PetitionRate"].ToString().Split(','))
};
HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(result));
}
/// <summary>
/// 违法打击按区县
/// </summary>
public void V_PetitionResolveByArea_WeiFaSet()
{
DataTable dt = new V_PetitionResolveByAreaDomain().SelectV_PetitionResolveByArea_WeiFa().Tables[0];
var result = from DataRow row in dt.Rows
select
new
{
name = row["Petition_result"].ToString(),
data = ConvertIntArray(row["PetitionRate"].ToString().Split(','))
};
HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(result));
}
#endregion
#region 盐城市信访积案化解率
/// <summary>
/// 违法打击按月份
/// </summary>
public void V_PetitionResolveByMonth_JiAn()
{
DataTable dt = new V_PetitionResolveByMonthDomain().SelectV_PetitionResolveByMonth_JiAn().Tables[0];
var result = from DataRow row in dt.Rows
select
new
{
name = row["Petition_result"].ToString(),
data = ConvertIntArray(row["PetitionRate"].ToString().Split(','))
};
HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(result));
}
/// <summary>
/// 违法打击按区县
/// </summary>
public void V_PetitionResolveByArea_JiAn()
{
DataTable dt = new V_PetitionResolveByAreaDomain().SelectV_PetitionResolveByArea_JiAn().Tables[0];
var result = from DataRow row in dt.Rows
select
new
{
name = row["Petition_result"].ToString(),
data = ConvertIntArray(row["PetitionRate"].ToString().Split(','))
};
HttpContext.Current.Response.Write(new JavaScriptSerializer().Serialize(result));
}
#endregion
#region 盐城市信访汇总表
/// <summary>
/// 正常信访
/// </summary>
public void V_PetitionTotal_Z_Set()
{
DataTable dt = new V_PetitionTotalDomain().SelectV_PetitionTotal_Z().Tables[0];
HttpContext.Current.Response.Write(TypeChange(dt));
}
/// <summary>
/// 正常信访
/// </summary>
public void V_PetitionTotal_F_Set()
{
DataTable dt = new V_PetitionTotalDomain().SelectV_PetitionTotal_F().Tables[0];
HttpContext.Current.Response.Write(TypeChange(dt));
}
#endregion
#region 信访事项2级钻取
/// <summary>
/// 信访事项区县2级钻取
/// </summary>
public void XF_QUXIAN_List()
{
try
{
//分页排序参数
string sidx = HttpContext.Current.Request.Params["sidx"];
string sord = HttpContext.Current.Request.Params["sord"];
int PageIndex = int.Parse(HttpContext.Current.Request.Params["page"]);
int PageSize = int.Parse(HttpContext.Current.Request.Params["rows"]);
string OrderBy = sidx + " " + sord;
string name =HttpContext.Current.Server.UrlDecode( HttpContext.Current.Request.Params["name"]);
ISelectFilter FilterEntity = SelectFilterFactory.GetSelectFilter();
if (!string.IsNullOrEmpty(name))
{
FilterEntity.Add(new ParamItem
{
ColumnName = "Petition_area",
ParameterValue = name ,
Operate = ParamOperate.Equal
});
}
SupervisionCaseInfoservice Service = new SupervisionCaseInfoservice();
DataSet ds = new RptPetitionMid_ETLDomain().XF_CountySelect(FilterEntity, OrderBy, PageIndex, PageSize);
string JSON = JSONHelper.GetJSON(ds, PageIndex, PageSize);
HttpContext.Current.Response.Write(JSON);
}
catch (Exception ex)
{
LogHelper.Error(HttpContext.Current.User.Identity.Name, "信访事项按区县分类统计!错误信息:" + ex.ToString());
}
}
/// <summary>
/// 信访事项问题2级钻取
/// </summary>
public void XF_Wenti_List()
{
try
{
//分页排序参数
string sidx = HttpContext.Current.Request.Params["sidx"];
string sord = HttpContext.Current.Request.Params["sord"];
int PageIndex = int.Parse(HttpContext.Current.Request.Params["page"]);
int PageSize = int.Parse(HttpContext.Current.Request.Params["rows"]);
string OrderBy = sidx + " " + sord;
string name = HttpContext.Current.Server.UrlDecode(HttpContext.Current.Request.Params["name"]);
ISelectFilter FilterEntity = SelectFilterFactory.GetSelectFilter();
if (!string.IsNullOrEmpty(name))
{
FilterEntity.Add(new ParamItem
{
ColumnName = "Petition_problem",
ParameterValue = name,
Operate = ParamOperate.Equal
});
}
SupervisionCaseInfoservice Service = new SupervisionCaseInfoservice();
DataSet ds = new RptPetitionMid_ETLDomain().XF_Problem(FilterEntity, OrderBy, PageIndex, PageSize);
string JSON = JSONHelper.GetJSON(ds, PageIndex, PageSize);
HttpContext.Current.Response.Write(JSON);
}
catch (Exception ex)
{
LogHelper.Error(HttpContext.Current.User.Identity.Name, "信访事项按区县分类统计!错误信息:" + ex.ToString());
}
}
#endregion
#region 字符串转int
/// <summary>
/// 字符串转int
/// </summary>
/// <param name="strArray"></param>
/// <returns></returns>
private int[] ConvertIntArray(string[] strArray)
{
int[] intArray = new int[strArray.Length];
for (int index = 0; index < strArray.Length; index++)
intArray[index] = Convert.ToInt32(strArray[index]);
return intArray;
}
#endregion
#region Json转换
private string TypeChange(DataTable dt)
{
return ISS.XinFang.Common.JSONHelper.CreateJsonParameters(dt);
}
#endregion
public bool IsReusable
{
get
{
return false;
}
}
}

浙公网安备 33010602011771号