Asp.net mvc4 + HighCharts + 曲线图

前端代码:

@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width" />
<script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script type="text/javascript">
var dataTmp = "";
$(function () {
GetseriesValue(); //获取数据源信息
});

//获取数据源信息
function GetseriesValue() {

var DropCustomerName = $("#DropCustomerName").val(); //获取客户名称

$.ajax({
type: "post",
url: "../Home/ViewCurve",
//data: { method: "mlqtylist", DropCustomerName: DropCustomerName },
dataType: "json",
//cache: false,
success: function (result) {
dataTmp = "";
for (var i = 0; i < result.length; i++)
{
//拼接json数据集字符串
dataTmp += "{name: ‘" + result[i].address + "‘,data: [" + result[i].Jan + ", " + result[i].Feb + ", " + result[i].Mar + "]}" + ",";
}
//$.each(result, function (i, field) {
// ;
// //拼接json数据集字符串
// dataTmp += "{name: ‘" + field.address + "‘,data: [" + field.Jan + ", " + field.Feb + ", " + field.Mar + "]}" + ",";
//});
//去除最后一个字符
dataTmp = dataTmp.substring(0, dataTmp.length - 1);
GetData(dataTmp);
},
error: function () {
alert("请求超时,请重试!");
}
});
};

//绑定获取数据信息操作
function GetData(dataTmp) {

//绑定数据信息
$(‘#container‘).highcharts({
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, ‘rgb(255, 255, 255)‘],
[1, ‘rgb(240, 240, 255)‘]
]
},
borderWidth: 2,
plotBackgroundColor: ‘rgba(255, 255, 255, .9)‘,
plotShadow: true,
plotBorderWidth: 1
},
title: {
text: ‘Monthly Total Information ‘,
x: -20
},
subtitle: {
text: ‘Source: winnaodan.net‘,
x: -20
},
lang: {
printChart: ‘打印图表‘,
downloadPNG: ‘下载JPEG 图片‘,
downloadJPEG: ‘下载JPEG文档‘,
downloadPDF: ‘下载PDF 文件‘,
downloadSVG: ‘下载SVG 矢量图‘,
contextButtonTitle: ‘下载图片‘
},
xAxis: {
gridLineWidth: 1,
lineColor: ‘#000‘,
tickColor: ‘#000‘,
categories: [‘Jan‘, ‘Feb‘, ‘Mar‘, ‘Apr‘, ‘May‘, ‘Jun‘, ‘Jul‘, ‘Aug‘, ‘Sep‘, ‘Oct‘, ‘Nov‘, ‘Dec‘]
},
yAxis: {
minorTickInterval: ‘auto‘,
lineColor: ‘#000‘,
lineWidth: 1,
tickWidth: 1,
tickColor: ‘#000‘,
min: 0,
labels: {
formatter: function () { //设置纵坐标值的样式
return this.value + ‘/Qty‘;
}
},
title: {
text: ‘Total Analyze (Qty)‘
},
plotLines: [{
value: 0,
width: 1,
color: ‘#808080‘
}]
},
tooltip: {
formatter: function () {
return ‘<b>‘ + this.series.name + ‘</b><br />‘ + this.x + ‘: ‘ + this.y + yAxisLabels;
}
},
legend: {
itemStyle: {
font: ‘9pt Trebuchet MS, Verdana, sans-serif‘,
color: ‘black‘
},
itemHoverStyle: {
color: ‘#039‘
},
itemHiddenStyle: {
color: ‘gray‘
},
layout: ‘vertical‘,
align: ‘right‘,
verticalAlign: ‘middle‘,
borderWidth: 0
},
series: eval("[" + dataTmp + "]") //获取数据源操作信息
});
}
</script>

</head>
<body>
<div id="container" style="min-width: 700px; height: 400px"></div>
</body>
</html>

Controller代码:

zmTestEntities entity = new zmTestEntities();

public ActionResult Curve()
{
return View();
}

public ActionResult ViewCurve()
{
var q = (from h in entity.HighCharts1 select h).ToList();
return Json(q,JsonRequestBehavior.AllowGet);
}

时间: 2024-08-29 17:37:43

Asp.net mvc4 + HighCharts + 曲线图的相关文章

Asp.net mvc4 + HighCharts + 柱状图

前端代码: @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport" content="width=device-width" /> <script type="text/javascript" src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js&

ASP.NET MVC4+BootStrap 实战(二)

上一篇文章我们讲述了页面初始加载数据的一些东西,本篇我们来讲一下查询按钮和分页按钮.在很久以前我写过一篇ASP.NET MVC4切近实战的文章,有关于分页的代码,本篇我们不采用微软的AJAX框架. 先看一下查询效果,在点击Get按钮之后,会进行AJAX请求. js代码如下 jQuery(document).ready(function () {     setRowBackColor();     $("#btnsearch").click(function () {         

无废话版本-Asp.net MVC4.0 Rasor的基本用法

最近工作有点忙,好久没写东西了!废话不多说了,进入主题! 1.在页面中输出单一变量时候,只要在C#语句之前加上@符号即可,For example: <p>Now Time:@DateTime.Now</p> 请注意,上述example中虽然使用C#语言撰写代码,但输出单一变量的时候,不需要加上分号: 2.在页面上输出一段含有空白字元或者运算子的结果时,必须在前后加上一个小括号,For example: <p> UserName:@(User.Identity.Name+

初入码田--ASP.NET MVC4 Web应用之创建一个空白的MVC应用程序

初入码田--ASP.NET MVC4 Web应用开发之一  实现简单的登录 初入码田--ASP.NET MVC4 Web应用开发之二 实现简单的增删改查 2016-07-29 再次之前,需要一台电脑(- ̄▽ ̄)-,以及Visual Studio 2013或者更高版本,SQL Sever数据库(暂时不用) 新建项目 下面会出现选择模板选项(我们选择的是MVC模板) 其中,在创建MVC模板时会有身份验证选项.可选择添加的文件夹和核心引用(Web Form和Web API)以及单元测试选项 身份验证分

ASP.NET MVC4入门到精通系列目录汇总(转)

序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,Web开发依旧停留在拖控件的水平,最最基本的算 法,递归.排序(我不要求快速排序,你会冒泡就行了)都不会,数据库方面,很基础的SQL都写不出,分组过滤也不会,更别提性能了,问下数据优化经验,除 了回答加索引基本就没下文了.当然,一些过去N年都是做ASP.NET WebForm开发的,不熟悉MVC,那也没

使用bootstrap+asp.net mvc4+IBatis.Net实现的小程序

这个项目用到了三个技术点 1.bootstap 3.0 2.asp.net mvc4 3.IBatis.Net 这个三个技术点分别解决前端界面展示.中间mvc路由控制.实体框架映射数据访问 重点分页问题花了点时间. 代码发布在GitHub上给感兴趣的人下载来学习 https://github.com/zuifengke/ChuanQI 来自为知笔记(Wiz)

asp.net mvc4 学习1

1 简介:微软在很早就看到了基于windows系统的web开发平台的需求,这时便开始提出自己的解决方案即微软的第一个基于web开发的平台ASP.再后来随着需求和性能的要求再2002年推出第二个解决方案ASP.NET来满足.但是技术不断地在改进很快又有了新的需求,不再基于页面在2008年推出了asp.net mvc的开发模式(模型-视图-控制器),看来五六年技术会得到一次飞跃,当然这只是猜测而已. mvc模式把应用程序分成三层,而且这三层之间的关系是松耦合即相互隔离,互不影响,而这种情况确实最好的

ASP.NET MVC3升级到ASP.NET MVC4 的方法

ASP.NET MVC3升级 ASP.NET MVC4 的方法: 1.先去掉引用的System.Web.Mvc.dll(MVC3版本),重新引入System.Web.Mvc.dll(MVC4版本) 2.替换项目 Web.config 中的 System.Web.Mvc, Version=3.0.0.0 System.Web.WebPages, Version=1.0.0.0 System.Web.Helpers, Version=1.0.0.0 System.Web.WebPages.Razor

[MVC4]初识ASP.NET MVC4

最近一个月都在专心做unity3d的斗地主游戏,从早到晚,最后总算是搞出来了,其中的心酸只有自己知道.最近才有功夫闲下来,还是学习学习之前的老本行--asp.net,现在用.net做项目流行MVC,而不是之前的三层,既然技术在更新,只能不断学习,以适应新的技术潮流! 创建MVC工程 1.打开Visual studio2012,新建MVC4工程 2.选择工程属性,创建MVC工程 3.生成工程的目录 App_Start:启动文件的配置信息,包括很重要的RouteConfig路由注册信息 Conten