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);
}
Asp.net mvc4 + HighCharts + 曲线图的更多相关文章
- ASP.NET MVC4 + Highcharts生成报表
//后端 public ActionResult TighteningReport(BReportTighteningReportModel model, string rate, string we ...
- Asp.net mvc4 + HighCharts + 柱状图
前端代码: @{ Layout = null;} <!DOCTYPE html> <html><head> <meta name="viewport ...
- ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存
ASP.Net MVC4+Memcached+CodeFirst实现分布式缓存 part 1:给我点时间,允许我感慨一下2016年 正好有时间,总结一下最近使用的一些技术,也算是为2016年画上一个完 ...
- CentOS上 Mono 3.2.8运行ASP.NET MVC4经验
周一到周三,折腾了两天半的时间,经历几次周折,在小蝶惊鸿的鼎力帮助下,终于在Mono 3.2.8上运行成功MVC4.在此总结经验如下: 系统平台的版本: CentOS 6.5 Mono 3.2.8 J ...
- ASP.NET MVC4入门到精通系列目录汇总
序言 最近公司在招.NET程序员,我发现好多来公司面试的.NET程序员居然都没有 ASP.NET MVC项目经验,其中包括一些工作4.5年了,甚至8年10年的,许多人给我的感觉是:工作了4.5年,We ...
- [MVC4]ASP.NET MVC4+EF5(Lambda/Linq)读取数据
继续上一节初始ASP.NET MVC4,继续深入学习,感受了一下微软的MVC4+EF5(EntityFramework5)框架的强大,能够高效的开发出网站应用开发系统,下面就看一下如何用MVC4+EF ...
- 21、ASP.NET MVC入门到精通——ASP.NET MVC4优化
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 删除无用的视图引擎 默认情况下,ASP.NET MVCE同时支持WebForm和Razor引擎,而我们通常在同一个项目中只用到了一种视图引擎 ...
- 最新版CentOS6.5上安装部署ASP.NET MVC4和WebApi
最新版CentOS6.5上安装部署ASP.NET MVC4和WebApi 使用Jexus5.8.1独立版 http://www.linuxdot.net/ ps:该“独立版”支持64位的CentOS ...
- Asp.Net MVC4 + Oracle + EasyUI 学习 第二章
Asp.Net MVC4 + Oracle + EasyUI 第二章 --使用Ajax提升网站性能 本文链接:http://www.cnblogs.com/likeli/p/4236723.html ...
随机推荐
- PHP学习系列(1)——字符串处理函数(5)
31.ord() 函数返回字符串第一个字符的 ASCII 值. 语法:ord(string) 例子 <?php echo ord("h"); echo ord("h ...
- C#文本文件导入数据库
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Windo ...
- 理解java的三大特性之多态(三)
摘自:http://cmsblogs.com/?p=52 面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已 ...
- Spark问题记录
Spark 多线程时的序列化问题 临时记录 Exception in thread "Thread-28" org.apache.spark.SparkException: Ta ...
- 在预装win8的电脑上换win7系统讲解
现在买电脑,如果电脑预装的系统是win8系统,那么这个电脑的默认启动模式应该就是UEFI模式,现在UEFI模式正在逐渐取代传统模式.UEFI启动需要一个独立的分区,它将系统启动文件和操作系统本身隔离, ...
- fontresize 移动端的手机字体 大小设置
这段js 需要置于页面上端 也就是 需要先加载js然后加载页面 (这段js是原生js而且比较短小 基本对页面加载速度无影响) FontResize : function(maxWidth){ (fun ...
- 工程和界面—Webstorm入门指南 Webstorm中的工程-备
1.新建工程 “Quick Start”界面新建工程: 也可以点击顶部菜单栏“File”-> “New Project”. 弹出如下界面: “Location”指向想要创建的工程目录(如果该目录 ...
- Java基础语法学习(1)switch...case
switch...case的标准语法 switch(待选择的变量) { case 值1:语句1; break; case 值2:语句2: break; ....... case 值n:语句n; bre ...
- 微软开源PowerShell并支持Linux和OS X
[微软在开源的道路上加速度了] 从一开始的各种对抗,各种通吃,到现在开始做服务,包罗万象.果然,换了主力,大有不同. 微软今天还宣布开源其.NET框架,令.NET Core能在Linux和OS X上运 ...
- 【转】Ubuntu重装,直接进win7,不进linux的解决方案(添加Ubuntu启动菜单)
原文网址:http://my.oschina.net/u/1377657/blog/281875 本人重装了Ubuntu12.04.4 LTS, 将Ubuntu启动项放在了/boot分区里面,启动的时 ...