ASP.NET MVC+HighCharts开发统计图表

HighCharts是开源的Web图表js组件，与D3.js一样，经常用于数据可视化。HighCharts图表类型丰富，功能非常强大，是很好的数据可视化解决方案，其官方网站为：http://www.hcharts.cn/，感兴趣的读者可以自行去下载HighCharts并按照给出的Example尝试着开发，基本上按照示例中的例子，把数据部分替换成自己想要展示的数据就可以了，非常容易上手。本篇博客将结合ASP.NET MVC和HighCharts开发统计图表功能，为简单起见，这里只演示三个最基本、最常用的图表类型（柱状图、饼图）。

一、横向柱状图

前端cshtml代码：

@{Layout = null;
}
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width" /><title>退休单位统计</title><script src='@Url.Content("~/Scripts/jquery-1.7.1.js")'></script><script src='@Url.Content("~/Scripts/hightcharts/highcharts.js")'></script><script src='@Url.Content("~/Scripts/hightcharts/exporting.js")'></script><script src='@Url.Content("~/Scripts/hightcharts/highcharts-zh_CN.js")'></script>
</head>
<body><div id="container" style="min-width: 400px; height: 400px"></div><script type="text/javascript">$(function () {$.ajax({url: '@Url.Action("GetTXDW", "TJTB")',type: 'get',success: function (result) {var name = result.split(';')[0];var data = result.split(';')[1];var nname = eval('(' + name + ')');var ddata = eval('(' + data + ')');$('#container').highcharts({chart: {type: 'bar'},title: {text: '退休人数最多的十个单位'},subtitle: {text: ''},xAxis: {categories: nname,//                            [//                                '自由职业',//                                'xxx有限公司',//                                'xxx工程总公司',//                                'xxx有限公司',//                                'xxx总公司',//                                'xxx有限公司',//                                'xxx有限公司',//                                'xxx有限公司',//                                'xxx厂',//                                'xxx有限责任公司'//                            ],
                            title: {text: null}},yAxis: {min: 0,title: {text: '人数',align: 'high'},labels: {overflow: 'justify'}},tooltip: {valueSuffix: '人'},plotOptions: {bar: {dataLabels: {enabled: true,allowOverlap: true}}},legend: {layout: 'vertical',align: 'right',verticalAlign: 'top',x: -40,y: 100,floating: true,borderWidth: 1,backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),shadow: true},credits: {enabled: false},series:[{name: '人数',data: ddata//data: [23926, 2328, 1828, 1816, 1485, 1464, 1408, 1164, 1124, 1124]
                        }]});}});})</script>
</body>
</html>

控制器cs代码：

/// <summary>
/// 退休单位统计
/// </summary>
/// <returns></returns>
[HttpGet]
public string GetTXDW()
{string result1 = string.Empty;string result2 = string.Empty;string sql = @"with a as(select rownum rn,t.* from(
select gzdw,count(gzdw) xl from T_RYXX
group by gzdw
order by xl desc) t)
select gzdw,xl from a where a.rn>=1 and a.rn<=10";result1 += "[";result2 += "[";DataSet ds = OracleHelper.Query(sql);for (int i = 0; i < ds.Tables[0].Rows.Count; i++){result1 += "'" + ds.Tables[0].Rows[i]["GZDW"].ToString() + "'";result2 += ds.Tables[0].Rows[i]["XL"].ToString();if (i != ds.Tables[0].Rows.Count - 1){result1 += ",";result2 += ",";}}result1 += "]";result2 += "]";return result1 + ";" + result2;
}

二、饼图

前端cshtml代码：

@{Layout = null;
}
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width" /><title>性别统计</title><script src='@Url.Content("~/Scripts/jquery-1.7.1.js")' type="text/javascript"></script><script src='@Url.Content("~/Scripts/hightcharts/highcharts.js")' type="text/javascript"></script><script src='@Url.Content("~/Scripts/hightcharts/highcharts-3d.js")' type="text/javascript"></script><script src='@Url.Content("~/Scripts/hightcharts/exporting.js")' type="text/javascript"></script><script src='@Url.Content("~/Scripts/hightcharts/highcharts-zh_CN.js")' type="text/javascript"></script>
</head>
<body><div id="container" style="min-width: 400px; height: 400px"></div><script type="text/javascript">$(function () {$.ajax({url: '@Url.Action("GetXBTJ", "TJTB")',type: 'get',success: function (result) {var data = eval('(' + result + ')');$('#container').highcharts({chart: {plotBackgroundColor: null,plotBorderWidth: null,plotShadow: false},title: {text: '退休人员性别比例'},tooltip: {headerFormat: '{series.name}<br>',pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'},plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',dataLabels: {enabled: true,format: '<b>{point.name}</b>: {point.percentage:.1f} %',style: {color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'}}}},series: [{type: 'pie',name: '退休人员性别比例',data: data}]});}});});</script>
</body>
</html>

控制器cs代码：

/// <summary>
/// 性别统计
/// </summary>
/// <returns></returns>
[HttpGet]
public string GetXBTJ()
{string result = string.Empty;string sql = @"with a as(select substr((case when length(sfzhm)=15 then idcard15to18(sfzhm)
else sfzhm end),17,1) sfzhm
from T_RYXX
where regexp_replace(sfzhm,'^[-\+]?\d+(\.\d+)?$','') is null
order by to_number(dah))select t.xb,count(t.xb) xl from (
select (case when mod(to_number(sfzhm),2)=0 then '女' else '男' end) xb from a) t
group by t.xb";DataSet ds = OracleHelper.Query(sql);result += "[";for (int i = 0; i < ds.Tables[0].Rows.Count; i++){result += "[";result += "'" + ds.Tables[0].Rows[i]["XB"].ToString() + "'";result += ",";result += ds.Tables[0].Rows[i]["XL"].ToString();result += "]";if (i != ds.Tables[0].Rows.Count - 1){result += ",";}}result += "]";return result;
}

三、纵向柱状图

前端cshtml代码：

@{Layout = null;
}
<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width" /><title>每日进出库统计</title><script src='@Url.Content("~/Scripts/jquery-1.7.1.js")'></script><script src='@Url.Content("~/Scripts/hightcharts/highcharts.js")'></script><script src='@Url.Content("~/Scripts/hightcharts/highcharts-3d.js")'></script><script src='@Url.Content("~/Scripts/hightcharts/exporting.js")'></script><script src='@Url.Content("~/Scripts/hightcharts/highcharts-zh_CN.js")'></script>
</head>
<body><div id="container" style="min-width: 400px; height: 400px"></div><script type="text/javascript">$(function () {$.ajax({url: '@Url.Action("GETJCK", "TJTB")',type: 'get',success: function (result) {var date = result.split(';')[0];var ink = result.split(';')[1];var outk = result.split(';')[2];var data1 = eval('(' + date + ')');var data2 = eval('(' + ink + ')');var data3 = eval('(' + outk + ')');$('#container').highcharts({chart: {type: 'column'},title: {text: '每日档案进出库情况（最近10天）'},subtitle: {text: ''},xAxis: {categories: data1,crosshair: true},yAxis: {min: 0,title: {text: '档案进出库'}},tooltip: {headerFormat: '<span style="font-size:10px">{point.key}</span><table>',pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +'<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',footerFormat: '</table>',shared: true,useHTML: true},plotOptions: {column: {pointPadding: 0.2,borderWidth: 0}},series: [{name: '进库',data: data3}, {name: '出库',data: data2}]});}});});</script>
</body>
</html>

控制器cs代码：

/// <summary>
/// 进出库统计
/// </summary>
/// <returns></returns>
[HttpGet]
public string GETJCK()
{string result1 = string.Empty;string result2 = string.Empty;string result3 = string.Empty;string sql = @"with a as(select to_char(czsj,'yyyy-mm-dd') jysj,count(*) jyxl
from t_dajy
where to_char(czsj,'yyyy-mm-dd')>to_char(sysdate-10,'yyyy-mm-dd')
group by to_char(czsj,'yyyy-mm-dd')),b as(select to_char(ghsj,'yyyy-mm-dd') ghsj,count(*) ghxl
from t_dagh
where to_char(ghsj,'yyyy-mm-dd')>to_char(sysdate-10,'yyyy-mm-dd')
group by to_char(ghsj,'yyyy-mm-dd')),c as(select
to_char(to_date(to_char(sysdate,'yyyy-mm-dd'),'yyyy-mm-dd') -rownum+1,'yyyy-mm-dd') as d from dual
connect by rownum <=to_date(to_char(sysdate,'yyyy-mm-dd'),'yyyy-mm-dd')
-to_date(to_char(sysdate-10,'yyyy-mm-dd'),'yyyy-mm-dd'))select c.d,(case when a.jyxl is null then 0 else a.jyxl end) jyxl,
(case when b.ghxl is null then 0 else b.ghxl end) ghxl from c
left join a on a.jysj = c.d
left join b on b.ghsj = c.d
order by d desc";result1 += "[";result2 += "[";result3 += "[";DataSet ds = OracleHelper.Query(sql);for (int i = 0; i < ds.Tables[0].Rows.Count; i++){result1 += "'" + ds.Tables[0].Rows[i]["D"].ToString() + "'";result2 += ds.Tables[0].Rows[i]["JYXL"].ToString();result3 += ds.Tables[0].Rows[i]["GHXL"].ToString();if (i != ds.Tables[0].Rows.Count - 1){result1 += ",";result2 += ",";result3 += ",";}}result1 += "]";result2 += "]";result3 += "]";return result1 + ";" + result2 + ";" + result3;
}

ASP.NET MVC+HighCharts开发统计图表相关推荐

ASP.NET MVC 最佳开发实践（1）
本文提供了一些代码设计准则,目标是帮助ASP.NET MVC 开发人员创建可靠的应用程序,当然,你可根据实际应用程序选择合适的标准.本文由EntLib.com 小组翻译,欢迎分享和交流ASP.NET ...
基于ASP.NET MVC框架开发Web论坛应用程序
我想通过本系列文章从头到尾构建一个完整的ASP.NET MVC论坛应用程序,最终的目的是探讨和推动使用ASP.NET MVC框架构建应用程序的最佳实践. 1. 简介在本篇中,我想先从全局方面介绍一下 ...
ASP.NET MVC+LINQ开发一个图书销售站点
园子里已经有很多人讲解了其理论知识,网上也有不少示例,但是很多示例都是Prieview1的,写这篇blog的目的是想用ASP.NET MVC+LINQ做一个示例项目,主要是为了演示ASP.NET MV ...
[导入]ASP.NET MVC框架开发系列课程(3)：URL导向.zip(16.66 MB)
讲座内容: ASP.NET MVC框架中一个关键特性就是基于URL的导向.本次课程将讲解URL Routing机制的使用. 课程讲师: 赵劼 MSDN特邀讲师赵劼(网名"老赵". ...
[导入]ASP.NET MVC框架开发系列课程(2)：一个简单的ASP.NET MVC应用程序.zip(13.70 MB)...
讲座内容: 使用ASP.NET MVC框架进行开发与ASP.NET WebForms截然不同.本次课程将通过官方的示例程序简单了解一下ASP.NET MVC应用程序的结构与特点. 课程讲师: 赵劼 M ...
[导入]ASP.NET MVC框架开发系列课程(1)：MVC模式与ASP.NET MVC框架概述.zip(8.80 MB)
讲座内容: ASP.NET MVC框架是既ASP.NET WebForms后的又一种开发方式.它提供了一系列优秀特性,使ASP.NET开发人员拥有了另一个选择.本次课程将对MVC模式ASP.NET M ...
一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之创建项目
打开VS2010,在主菜单选择文件,新建,项目,在如图1所示的弹出窗口中已安装的模板下选择C#的Web模板,然后选择"ASP.NET MVC 3 Web应用程序",将项目名称修改为 ...
基于ASP.NET MVC+SQLite开发的一套（Web）图书管理系统【100010294】
摘要随着互联网的快速发展,各种线下手工业务都开始转向了互联网线上操作,在21世纪的信息革命时代,信息管理系统成为日常信息记录的主流工具. 本文介绍了以VS 2019(Microsoft Visual ...
asp.net webform 与asp.net mvc 混合开发项目总结
公司里的一个web项目运行速度比较慢(原来是asp.net webform 建立的时候是通过新建网站不是web项目) 这个项目最早是VS2003 做的时候asp.net也不是很熟悉订单登记的页 ...

ASP.NET MVC+HighCharts开发统计图表

ASP.NET MVC+HighCharts开发统计图表相关推荐

最新文章

热门文章