在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图
开发背景：
今天在做一个关于商城后台金额报表统计的功能，为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表，大家也可以去了解一下免费开源主要是好看。
首先是后台代码：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace HighChartsReports.Controllers
{ /// <summary>
/// 自定义数据类型（饼图需要使用的json数据）
/// </summary>
public class MyReportDatas
{
public string time { get; set; }
public int Count { get; set; }
} public class ReportController : Controller
{
/// <summary>
/// 曲线图
/// </summary>
/// <returns></returns>
public ActionResult Diagram()
{
return View();
} /// <summary>
/// 柱状图
/// </summary>
/// <returns></returns>
public ActionResult BarGraph()
{
return View();
} /// <summary>
/// 饼图
/// </summary>
/// <returns></returns>
public ActionResult Piechart()
{
return View();
} /// <summary>
/// 获取数据接口
/// </summary>
/// <param name="BeformDays">前多少天</param>
/// <param name="Type">请求类型</param>
/// <returns></returns>
[HttpPost]
public JsonResult GetDataList(int BeformDays,int Type)
{
//时间当然大家可以根据自己需要统计的数据进行整合我这里是用来
演示就没有用数据库了
var Time = new List<String>();
//数量
var Count = new List<int>();
var PieData=new List<MyReportDatas>();
//Type为1表示曲线和柱状数据
if (Type==)
{
for (int i = ; i < BeformDays; i++)
{
Time.Add(DateTime.Now.AddDays(-
BeformDays).ToShortDateString());
Count.Add(i + );
}
}
else//饼状图
{
for (int i = ; i < BeformDays; i++)
{
var my = new MyReportDatas();
my.Count = i + ;
my.time = DateTime.Now.AddDays(-
BeformDays).ToShortDateString();
PieData.Add(my);
}
} var Obj = new
{
Times=Time,
Counts=Count,
PieDatas = PieData
}; return Json(Obj,JsonRequestBehavior.AllowGet);
} }
}
前端代码（曲线图，柱状图，饼图）：
一、曲线图：
@{
ViewBag.Title = "通过Ajax获取报表数据并以曲线图的形式展示";
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--这是个好东西，设置屏幕密度为高频，中频，底频，禁止用户手动调整缩放-->
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>曲线图</title>
<script type="text/javascript" src="~/Content/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="~/Content/js/highcharts.js"></script>
<!--报表打印和下载图片-->
<script type="text/javascript" src="~/Content/download/exporting.js" charset="gb2312"></script>
<!--黑色皮肤插件-->
<script type="text/javascript" src="~/Content/js/theme/gray.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function () {
var Time = new Array();//存储时间
var Count = new Array();//存储数量
//获取数据
$.ajax({
async: false,
type: 'post',
datatype: 'json',
url: '/Report/GetDataList',
data: { BeformDays: , Type: },//获取前七天的数据，
success: function (Data) {
console.log(Data.Times);
console.log(Data.Counts);
Time = Data.Times;
Count = Data.Counts;
}
})
//highchants样式渲染
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',//放置图表的容器
plotBackgroundColor: null,//绘图背景颜色
plotBorderWidth: null,//绘图边框宽度
defaultSeriesType: 'line'//我在这里选折曲线//图表类型样式line, spline, area, areaspline, column, bar, pie , scatter这些样式随你选
},
title: {
text: '曲线图统计'
},
subtitle: {
text: ''//副标题
},
xAxis: {//X轴数据
categories: StitchingData(Time),//存储数组格式的那么我们自己拼接一下数据格式吧
rotation: -, //字体倾斜
align: 'right',
style: { font: 'normal 13px 宋体' }
}
},
yAxis: {//Y轴显示文字
title: {
text: '产量/百万'
}
},
//点击事件
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, );
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true//是否显示title
}
},
series: [{
name: '产量统计报表',
data: StitchingData(Count), //这里也是一样的需要自己拼接数组对象
});
//数据拼接
function StitchingData(data)
{
var Datas = new Array();
for (var i = ; i < data.length; i++) {
Datas[i] = data[i];//将数据添加到数据中
}
console.log(Datas);
return Datas;
}
});
</script>
</head>
<body>
<!--内容存放处-->
<div id="container">
</div>
</body>
</html>
运行效果如下：
二、柱状图：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--这是个好东西，设置屏幕密度为高频，中频，底频，禁止用户手动调整缩放-->
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>柱状图(有没有发现呀这个和曲线图其实是一样的只是采用的展现格式不同哟哈哈)</title>
<script type="text/javascript" src="~/Content/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="~/Content/js/highcharts.js"></script>
<script type="text/javascript" src="~/Content/js/theme/grid.js"></script> <script type="text/javascript"> var chart;
$(document).ready(function () {
var Time = new Array();//存储时间
var Count = new Array();//存储数量
//获取数据
$.ajax({
async: false,
type: 'post',
datatype: 'json',
url: '/Report/GetDataList',
data: { BeformDays: ,Type: },//获取前七天的数据，
success: function (Data) {
console.log(Data.Times);
console.log(Data.Counts);
Time = Data.Times;
Count = Data.Counts;
} }) //highchants样式渲染
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',//放置图表的容器
plotBackgroundColor: null,//绘图背景颜色
plotBorderWidth: null,//绘图边框宽度
defaultSeriesType:'column'//我在这里选折曲线//图表类型样式line, spline, area, areaspline, column, bar, pie , scatter这些样式随你选
},
title: {
text: '柱状图统计'
},
subtitle: {
text: ''//副标题
},
xAxis: {//X轴数据
categories: StitchingData(Time),//存储数组格式的那么我们自己拼接一下数据格式吧,
labels: {
rotation: -, //字体倾斜
align: 'right',
style: { font: 'normal 13px 宋体' }
}
},
yAxis: {//Y轴显示文字
title: {
text: '产量/百万'
}
},
//点击事件
tooltip: {
enabled: true,
formatter: function () {
return '<b>' + this.x + '</b><br/>' + this.series.name + ': ' + Highcharts.numberFormat(this.y, );
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true
},
enableMouseTracking: true//是否显示title
}
},
series: [{
name: '产量统计报表',
data: StitchingData(Count), //这里也是一样的需要自己拼接数组对象
}]
}); //数据拼接
function StitchingData(data) {
var Datas = new Array();
for (var i = ; i < data.length; i++) {
Datas[i] = data[i];//将数据添加到数据中
}
console.log(Datas);
return Datas;
}
});
</script> </head>
<body>
<!--存放内容-->
<div id="container">
</div>
</body>
</html>
运行效果如下：
三、饼图：
@{
ViewBag.Title = "饼图";
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--这是个好东西，设置屏幕密度为高频，中频，底频，禁止用户手动调整缩放-->
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>饼图</title>
<script type="text/javascript" src="~/Content/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="~/Content/js/highcharts.js"></script>
<script type="text/javascript" src="~/Content/js/theme/grid.js"></script>
<script type="text/javascript">
var chart;
$(document).ready(function () {
//获取数据
$.ajax({
async: false,
type: 'post',
datatype: 'json',
url: '/Report/GetDataList',
data: { BeformDays: , Type:},//获取前七天的数据，
success: function (Data) {
console.log(Data);
console.log(Data.PieDatas);
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
defaultSeriesType: 'pie'
},
title: {
text: '饼状图统计'
},
tooltip: {
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true, //点击切换
cursor: 'pointer',
dataLabels: {
enabled: true,
color: Highcharts.theme.textColor || '#000000',
connectorColor: Highcharts.theme.textColor || '#000000',
formatter: function () {
return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
}
},
showInLegend: true
}
},
//传说是json格式但是还是采用了自己拼接数据方法才显示
series: [
{
data:StitchingData(Data.PieDatas),
}]
});
}
})
//数据拼接
function StitchingData(data) {
var Datas = new Array();
$.each(data, function (index, obj) {
Datas.push([obj.time,obj.Count]);
})
console.log(Datas);
return Datas;
}
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>
运行效果如下：
总结并附加Demo地址：
学习需要一步一步来，从小事做起，从点滴做起，用心去做好每一个功能，不仅仅是对自己客户负责，更是对自己负责。
博客demo下载地址：（https://github.com/YSGStudyHards/ShipBuilding/tree/master/C%23%EF%BC%8C.Net%EF%BC%8C.Net%20Core%20%E7%BC%96%E7%A8%8B%E7%BB%83%E4%B9%A0/HighChartsReports%EF%BC%88.net%20mvc%E6%8A%A5%E8%A1%A8%EF%BC%89）Highcharts地址：https://www.hcharts.cn/demo/highcharts，接下来我就直接上代码了。
在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图的更多相关文章
- 在MVC中要实现Ajax
在MVC中要实现Ajax有很多的方式,有微软自己的MicrosoftAjax,也可以用JQuery的AJax来实现,如果对其他的JavaScript框架熟悉,还可以采用其他的实现方案,比如说Proto ...
- ASP.NET MVC中如何以ajax的方式在View和Action中传递数据
前言:写这篇随笔的时候,在url上漏写了斜线,找了好久错误,整个人都很不好.#我是猪系列 背景:之前介绍过一篇如何构建 MVC&AJax&JSon示例,这一篇单独讲解如何在View和A ...
- asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs ...
- MVC中利用ViewBag传递Json数据时的前端处理方法
用viewBag传递Json字符串到前端时,json字符串中的“会被转义为& quot,前端处理方法为@Html.Raw(Json.Encode(ViewBag.Data)),再用eval() ...
- ASP.NET MVC中使用highcharts 生成简单的折线图
直接上步骤: 生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用 ...
- 3、看源码MVC中的Controllr的Json方法
无论ViewResult还是JsonResult都继承ActionResult,ActionResult里只有一个方法ExecuteResult 1.Controllr的Json方法 实际上是new ...
- Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图
http://my.oschina.net/xshuai/blog/345117?fromerr=hEXYMdR0 http://www.oschina.net/code/snippet_144464 ...
- servlet中如何发送ajax请求并动态拼接数据到html中
废话不多说,直接上代码 1.servlet 2.js 3.jsp 有不懂得欢迎来扣我哦^_^ 详细介绍请查看全文:https://cnblogs.com/qianzf/ 原文博客的链接地址:https ...
- Asp.net mvc中的Ajax处理
在Asp.net MVC中的使用Ajax, 可以使用通用的Jquery提供的ajax方法,也可以使用MVC中的AjaxHelper. 这篇文章不对具体如何使用做详细说明,只对于在使用Ajax中的一些需 ...
随机推荐
- Oauth2.0 用Spring-security-oauth2
客户端通过appId,redirectUrl,在open platform打开的页面上填写正确的用户名和密码后,open platform验证通过后,会跳转到redirectUrl,此时的redire ...
- c#Socket客户端和服务端的信息发送
这是我制作的界面信息,c# Socket通信的简单使用,刚开始学习,不对的地方请大家指教,目前是可以运行的,之后自己在慢慢添加新的东西.同时了解Tcp协议的三次握手.希望对跟我一样的初学者有所帮助. ...
- rabbit入门教程
简介 rabbitmq是一个消息代理系统,为应用提供一个通用得消息发布,接受平台,为应用提供非阻塞的消息系统,方便进行异步处理. 优点 消息的可靠性.持久化消息,消息接受确认,消息重传等可靠机制. 灵 ...
- spring创建bean及数据注入
通过spring的IoC可以实现由配置文件来创建类的对象,可以降低类鱼类之间的耦合, 通常我们都是在代码中控制对象的生成和属性注入,而使用IoC后,就可以将设计好的类交给IoC容器,让容器去控制对象的 ...
- linux安装tomcat Neither the JAVA_HOME nor the JRE_HOME environment variable is defined
这两天我们的开发机重启了好几次,发现每次重启后我的tomcat总是没有启动.检查java路径,配置正确,后来拿普通账号启动tomcat时报如下的错: Neither the JAVA_HOME nor ...
- 【bzoj3598】: [Scoi2014]方伯伯的商场之旅
Description 方伯伯有一天去参加一个商场举办的游戏.商场派了一些工作人员排成一行.每个人面前有几堆石子.说来也巧,位置在 i 的人面前的第 j 堆的石子的数量,刚好是 i 写成 K 进制后的 ...
- BZOJ_1485_[HNOI2009]有趣的数列_卡特兰数
BZOJ_1485_[HNOI2009]有趣的数列_卡特兰数 Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ ...
- QTTabBar
出处:https://www.mokeyjay.com/archives/1811
- Android 7.0 存储系统—Vold与MountService分析（二）（转 Android 9.0 分析）
Android的存储系统(二) 回顾:前贴主要分析了Android存储系统的架构和原理图,简要的介绍了整个从Kernel-->Vold-->上层MountService之间的数据传输流程, ...
- 安卓开发笔记（二十六）：Splash实现首页快速开屏功能
我们在进行安卓开发的时候,首页开有两种方式,一种是利用handler将一个活动进行延时,时间到达之后软件则会跳转到第二个活动当中.而另一种方法则是更加常用的方法,利用splash实现首页的快速开屏,这 ...