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 = ; i < ds.Tables[].Rows.Count; i++)
{
result1 += "'" + ds.Tables[].Rows[i]["GZDW"].ToString() + "'";
result2 += ds.Tables[].Rows[i]["XL"].ToString();
if (i != ds.Tables[].Rows.Count - )
{
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 = ; i < ds.Tables[].Rows.Count; i++)
{
result += "[";
result += "'" + ds.Tables[].Rows[i]["XB"].ToString() + "'";
result += ",";
result += ds.Tables[].Rows[i]["XL"].ToString();
result += "]";
if (i != ds.Tables[].Rows.Count - )
{
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 = ; i < ds.Tables[].Rows.Count; i++)
{
result1 += "'" + ds.Tables[].Rows[i]["D"].ToString() + "'";
result2 += ds.Tables[].Rows[i]["JYXL"].ToString();
result3 += ds.Tables[].Rows[i]["GHXL"].ToString(); if (i != ds.Tables[].Rows.Count - )
{
result1 += ",";
result2 += ",";
result3 += ",";
}
}
result1 += "]";
result2 += "]";
result3 += "]";
return result1 + ";" + result2 + ";" + result3;
}
ASP.NET MVC+HighCharts开发统计图表的更多相关文章
- Asp.net Mvc模块化开发之分区扩展框架
对于一个企业级项目开发,模块化是非常重要的. 默认Mvc框架的AreaRegistration对模块化开发真的支持很好吗?真的有很多复杂系统在使用默认的分区开发的吗?我相信大部分asp.net的技术团 ...
- Asp.net Mvc模块化开发系列(目录)
模块化开发是非常重要的,模块化开发是个系统性问题,为此我觉得有必须要写一个系列的文章才能基本说的清楚 那又为什么要写一个目录呢? 其一.是对我昨天承诺写一个系列新的文章的回应 其二.是先写出一个大纲, ...
- ASP.NET MVC 网站开发总结（三） ——图片截图上传
本着简洁直接,我们就直奔主题吧,这里需要使用到一个网页在线截图插件imgareaselect(请自行下载). 前台页面: <!DOCTYPE html> <html> < ...
- ASP.NET MVC框架开发系列课程 (webcast视频下载)
课程讲师: 赵劼 MSDN特邀讲师 赵劼(网名“老赵”.英文名“Jeffrey Zhao”,技术博客为http://jeffreyzhao.cnblogs.com),微软最有价值专家(ASP.NET ...
- 像asp.net Mvc一样开发nodejs+express Mvc站点
像asp.net Mvc一样开发nodejs+express Mvc站点 首先,我是个c#码农.从事Mvc开发已然4个年头了,这两年前端MVC的兴起,我也跟风学了一些,对前端的框架也了解一些,angu ...
- ASP.NET MVC企业开发的基本环境
ASP.NET MVC企业开发的基本环境[资源服务器概念] 学完了ASP.NET MVC4 IN ACTION 六波以后 企业开发演习 标签:AaronYang 茗洋 EasyUI1.3.4 ...
- Easyui + asp.net mvc + sqlite 开发教程（录屏）适合入门
Easyui + asp.net mvc + sqlite 开发教程(录屏)适合入门 第一节: 前言(技术简介) EasyUI 是一套 js的前端框架 利用它可以快速的开发出好看的 前端系统 web ...
- ASP.NET MVC——CodeFirst开发模式
Entity Framework框架提供了几种开发模式,比如Database First,Model First,Code First.Database First是最老也是应用得最广泛的一种设计方式 ...
- ASP.NET MVC 网站开发总结（四）——校友平台开发总结
又历经一个多月的努力,学校的一个校友平台项目也接近内测的尾声了,简单的总结一下这次的项目开发. 与上次做Wing工作室的门户网站相比,同样是团队开发,参与的人员多了一个,用的时间也差不多一个月,但从总 ...
随机推荐
- java中继承和多态的理解
继承的概念 继承是java面向对象编程技术的一块基石,因为它允许创建分等级层次的类. 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父 ...
- GMA Round 1 逃亡
传送门 逃亡 你在森林中,遇到了一只老虎.此时此刻,老虎在(0,0)的位置,你在(2,1)的位置. 你开始沿着一条林间小路逃亡,移动向量是$(\frac{\sqrt{6}}{2},\frac{\sqr ...
- C. Playing Piano 动态规划
题目意思是给你一个n长度的数字串为a,让你构造一个n长度的数字串b值都为1-5满足以下条件: 正常的dfs暴力构造会超时,我试过了.. 可以开一个二维数组dp[i][j]用来表示b的第i个数字为j是否 ...
- IE环境表单提交不跳转页面
<head> <base target="_self"></base> </head>
- golang使用chan注意事项
背景 最近老代码中遇到的一个问题,表现为: goroutine数量在高峰期上涨,上涨后平峰期将不下来.也就是goroutine泄露 使用pprof看,进程堵塞在chan chan的使用经验 在使用ch ...
- Python 汉字转拼音
本文参考: Python中文转拼音代码(支持全拼和首字母缩写) 中文中不可以有“()” # -*- coding: utf-8 -*- __version__ = '0.9' __all__ = [& ...
- 解决Everything1.4版本预览时不支持自定义后缀的问题
2017年6月Everything版本升级到了1.4.x 个人使用下来认为最主要的有以下几点 添加预览功能 搜索结果多选 点击目录列即打开文件所在目录(需要设置:常规->结果->双击路径列 ...
- 转发：entos7修改文件夹权限和用户名用户组
Linux系统下经常遇到文件或者文件夹的权限问题,或者是因为文件夹所属的用户问题而没有访问的权限.根据我自己遇到的情况,对这类问题做一个小结.在命令行使用命令“ll”或者“ls -a”,可以查看文件或 ...
- CAS的单点登录和oauth2的最大区别
CAS的单点登录时保障客户端的用户资源的安全 oauth2则是保障服务端的用户资源的安全 CAS客户端要获取的最终信息是,这个用户到底有没有权限访问我(CAS客户端)的资源. oauth2获取的最终信 ...
- 说说erlang tuple和record结构
erlang有两种复合结构.tuple和list,两者的区别是tuple子元素的个数是固定不变的.声明后就不能改变了.而list是可变的,能够通过[H|T]来取出或插入新元素. record有点像C/ ...