一、先来看看效果
二、前台实现代码
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