Asp .net MVC4 利用Highcharts.js 生成曲线图

一、先来看看效果

　　

二、前台实现代码

　　1、引入相对应得css及Javascript文件

        <link href="~/Content/css/bootstrap.css" rel="stylesheet" />
        <link href="~/Content/css/css.css" rel="stylesheet" />
        <script src="~/Scripts/jquery-1.8.2.min.js"></script>
        <script src="~/Scripts/js/bootstrap.min.js"></script>
        <script src="~/Scripts/js/datepicker/WdatePicker.js"></script>
        <script src="~/Scripts/js/highcharts.js"></script>
        <script src="~/Scripts/js/exporting.js"></script>

　　<style type="text/css">
        #AssayItems {
            width: 100%;  
            margin:10px auto;  
            text-align:center;
            vertical-align:middle;
            border: 1px solid #F8F8FF;
            display: none;
        }

        #Loading {
            text-align: center;
            display: none;
        }
    </style>

　　2、统计按钮触发的事件

　　　　$("#statiBtn").click(function () {
                    var Processid = $("#Process_PTR").children('option:selected').val();
                    ItemNo = $("#ItemNo").children('option:selected').val();
                    selectTit = $("#ItemNo").children('option:selected').text();
                    v = $("#Process_PTR").children('option:selected').text();
                    var begintime = $("#beginDate").val();
                    var lasttime = $("#lastDate").val();
                    LoadMEIRange(ItemNo,currRV);
                    $.ajax({
                        type: "POST",
                        url: '../StatisticsAssay/LoadCharts',
                        data: { 'Process_PTR': Processid, 'ItemNo': ItemNo, 'beginDate': begintime, 'lastDate': lasttime },
                        dataType: "json",
                        error: function (request) {
                            alert("Connection error");
                        },
                        beforeSend: function () {
                            //加载图标
                            $("#Loading").show();
                            $("#AssayItems").hide();
                        },
                        success: function (result) {
                            $("#AssayItems").show();
                            var assalyData = result;
                            var assaly = eval('(' + assalyData + ')');
                            var assalyd = eval('(' + assaly + ')');
                            var timeArr = new Array();
                            var resArr = new Array();
                            $.each(assalyd.ds, function (i, idtem) {
                                timeArr[i] = idtem.Timer; // 时间值
                            });
                            $.each(assalyd.res, function (i, idtem) {
                                resArr[i] = idtem.Result; // 检测结果
                            });

                            //加载曲线图
                            LoadCharts(timeArr, resArr);
                            $("#Loading").hide();
                        }
                    });
                    //防止Ajax页面提交后被刷新
                    //return false;
                });

　　3、生成曲线图

　　function LoadCharts(t,c)
        {
            Highcharts.setOptions({
                lang: {
                    printChart: "打印图表",
                    downloadJPEG: "下载JPEG 图片",
                    downloadPDF: "下载PDF文档",
                    downloadPNG: "下载PNG 图片",
                    downloadSVG: "下载SVG 矢量图",
                    exportButtonTitle: "导出图片"
                }
            });
            $('#AssayItems').highcharts({
                chart: {
                    type:'line'
                },
                title: {
                    text:''+v+'化验分析曲线图',
                    x: -20
                },
                xAxis: {//X轴标签
                    categories: t,
                    labels: {
                        rotation: -25,
                        style: {
                            fontSize: '10px',
                            fontFamily: 'Verdana, sans-serif'
                        }
                    }
                },
                yAxis: {
                    title: {
                        text: '统计数'
                    },
                    plotLines: [{
                        value: SXNums,
                        color: 'red',
                        dashStyle: 'shortdash',  
                        width: 2,  
                        label: {  
                            text: 'MEI下范围('+SXNums+')'  
                        }  
                    },
                    {
                        value: MIDNums,
                        color: 'green',  
                        dashStyle: 'shortdash',  
                        width: 2,  
                        label: {  
                            text: 'MEI中范围(' + MIDNums + ')'
                        }  
                    },
                    {
                        value:XXNums,
                        color: 'red',  
                        dashStyle: 'shortdash',  
                        width: 2,  
                        label: {  
                            text: 'MEI上范围(' + XXNums + ')'
                        }  
                    }]
                },
                colors:
                [
                    '#00B2EE'
                ],  
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                series: [
                {
                    name: '' + selectTit + '',
                    data: c
                }
                ]
            });
        }

 

二、后台实现代码

　　1、获取Mei范围

　　public ActionResult LoadMEIRange()
        {
            int itemno = 0;
            int processid = 0;
            string meiStr = "";
            if (Request["itemno"] != null && Request["itemno"].ToString() != "")
            {
                itemno = Convert.ToInt32(Request["itemno"].ToString());
                processid = Convert.ToInt32(Request["processid"].ToString());
            }
            else
            {
                itemno = 1;
                processid = 1;
            }
            string meiSql = "select MeiRange from Assay_ProcessDetails where Process_PTR="+processid+" and ItemNo="+itemno+"";
            DataTable dt = SqlHelper.QueryTable(meiSql);
            if (dt.Rows.Count > 0)
            {
                meiStr = dt.Rows[0]["MeiRange"].ToString();
            }
            return Content(meiStr);
        }

 

三、博客地址：http://www.cnblogs.com/Resources-blogs/p/6600107.html