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 ...
 
随机推荐
- C#析构函数,类运行结束后运行
			
public class Students { //创建对像时使用 public Students(string name, int age, char gender, int englist, in ...
 - Java Se 基础系列(笔记) -- Exception && Array
			
Exception 1.java 异常是java提供的用于处理程序中错误(指在程序运行的过程中发生的一些异常事件)的一种机制 2.java程序的执行过程中如果发生异常事件则自动生产一个异常类对象,该对 ...
 - nginx+uwsgi+django1.8.5配置
			
http://jingyan.baidu.com/article/2d5afd69cdf6ad85a3e28e4f.html(搜索: wusgi 配置django1.8项目) http://my.os ...
 - develop process
			
-f Option is dangerous, make sure that only do this on your own branch # When you starting coding at ...
 - Jmeter实现WebSocket协议的接口和性能测试方法
			
WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex). 浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一 ...
 - ATM  Solved Problem code: HS08TES
			
# ATM import sys withdraw, balance = map(float, sys.stdin.readline().strip().split()) # strip()用法去除结 ...
 - iOS触摸事件深度解析-备用
			
概述 本文主要解析从我们的手指触摸苹果设备到最终响应事件的整个处理机制.本质上讲,整个过程可以分为两个步骤: 步骤1:找目标.在iOS视图层次结构中找到触摸事件的最终接受者: 步骤2:事件响应.基于i ...
 - mysql创建utf-8字符集数据库
			
CREATE DATABASE db_name DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci; CREATE DATABASE 的语法:CREA ...
 - T-SQL函数类别统计
 - MVC分部试图传参数
			
@Html.Partial("_NavMenuPage", new ViewDataDictionary { { "proimshowId",imshowI ...