Jqplot+asp.net画图实现

来源：互联网发布：日本的电视直播软件编辑：程序博客网时间：2024/04/29 08:15

摘自：http://www.cnblogs.com/zhangxiaolin/archive/2012/02/16/2354340.html

说明：最近由于项目的需求研究了一段时间的Jqplot,做了个例子分享下，有不足之处请多指正。Jqplot是用Jquery框架开发的画图组件，开源，免费，而且兼容性比较好，扩展性强，有兴趣的朋友可以去官网下载学习，

官网:www.Jqplot.com

利用Jqplot首先引用底层实现的Css与JS文件，然后再利用其提供的方法实现对需求的描述：下面是一个实时统计数据的曲线

备注：利用Jquery框架扩展的Jqplot图形组件，不仅开源，免费，而且兼容性比较好，扩展性强。支持现行的浏览器。官方站点为:www.jqplot.com.可以从该站点上下载需要的JS文件及例子.

利用Jqplot首先引用底层实现的Css与JS文件，然后再利用其提供的方法实现对需求的描述：下面是一个实时统计数据的曲线

一.引入：

1.jquery.jqplot.css--提供样式支持

2.excanvas.js---兼容IE7,8,9浏览器，其他浏览器可以不引入此文件

3.jquery.min.js---Jquery框架的支持

4.jquery.jqplot.min.js---Jqplot图形绘制核心JS

以上文件必须引入，如果实现其他的功能可以接着引入以下文件：该部分文件可以放到页面最末端，以提高页面加载速度。

5.jqplot.highlighter.min.js---对鼠标悬浮的支持

6.jqplot.json2.min.js----动态获取Json数据的支持

7.jqplot.dataAxisRenderer.min.js---提供对横坐标格式化显示的支持，比如传入日期格式；

8.jqplot.cursor.min.js---坐标点取值的支持。

二.实现部分代码

前端：Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TestAjax._Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title></title>    <link href="css/jquery.jqplot.min.css" rel="stylesheet" type="text/css" />    <script src="js/jquery.min.js" type="text/javascript"></script>  <script src="js/jquery.jqplot.min.js" type="text/javascript"></script>    <script src="js/excanvas.min.js" type="text/javascript"></script>       <script src="js/jqplot.dateAxisRenderer.js" type="text/javascript"></script>  </head><body>  <div class="example-plot" id="chart1"></div> <input type="button" value="Test" id="btnLoadData" />      <script type="text/javascript">          $(document).ready(function() {              laodData();              $("#btnLoadData").bind("click", laodData);          });          var laodData = function() {              var ajaxDataRenderer = function(url, plot, options) {                  var ret = null;                  var dataJson = [[], []];                  $.ajax({                      async: false,                      url: url,                      dataType: "json",                      success: function(data) {                          //构造数组                          for (var i = 0; i < data.length; i++) {                              var chObj = data[i];                              for (var j = 0; j < chObj.length; j++) {                                  dataJson[i].push([chObj[j].dTime, chObj[j].V]);                              }                          }                          //dataJson.sort();                          ret = dataJson;                      }                  });                  return ret;              };              var jsonurl = "Handler/Handler.ashx";              var options = {                  title: "ajax返回数据展现",                  seriesDefaults: {                      showMarker: true, //是否显示点                      pointLabels: { show: true }                      //, label: '曲线1'                  },                  series: [{ label: '曲线1', neighborThreshold: -1 }, { label: '曲线2', neighborThreshold: -1}],                  legend: { show: true, location: 'se' },                  //横轴为日期时必须有如下代码                  axes: {                      xaxis: { renderer: $.jqplot.DateAxisRenderer, tickOptions: { formatString: "%H:%M"}//,                          //numberTicks: 4                          //tickInterval: '10 minutes'                          //, max: '23:59'                          // , min: "23:59AM"                           //, ticks: ['00:05', '00:10', '00:15', '00:20', '00:25', '00:30', '00:35']                      }, //%m-%#d:MM-dd;%H:%M:小时:分钟形式                      yaxis: { renderer: $.jqplot.LogAxisRenderer }                  },                  //悬浮展现控制                  highlighter: { show: true, yvalues: 1, tooltipAxes: "xy",                      formatString: '<table class="jqplot-highlighter"> \                <tr><td>日期:</td><td>%s</td></tr> \                <tr><td>人数:</td><td>%s</td></tr></table>'                  },                  dataRenderer: ajaxDataRenderer,                  cursor: {                      show: true                  },                  dataRendererOptions: { unusedOptionalUrl: jsonurl }              }              plot = $.jqplot("chart1", jsonurl, options);          }    </script></body></html>

后端代码:Handler/Handler.ashx

using System;using System.Collections.Generic;using System.Linq;using System.Web;namespace TestAjax.Handler{    /// <summary>    /// $codebehindclassname$ 的摘要说明    /// </summary>        public class Handler : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            Random random = new Random(100);            DateTime dtBeginDate = DateTime.Parse("2012-02-01");            System.Collections.ArrayList arrList = new System.Collections.ArrayList();            IList<data> dataList = new List<data>();//存储第一条曲线数据            IList<data> dataList2 = new List<data>();//存储第二条曲线数据            for (int i = 0; i < 135; i++)            {                dataList.Add(new data(dtBeginDate.ToString(), random.Next(100)));                dtBeginDate = dtBeginDate.AddMinutes(5);            }            ////第2条曲线数据            //DateTime dtBeginDate1 = DateTime.Parse("2012-02-01");            //for (int i = 0; i < 6; i++)            //{            //    dataList2.Add(new data(dtBeginDate1.ToString(), random.Next(100)));            //    dtBeginDate1 = dtBeginDate1.AddMinutes(5);            //}            arrList.Add(dataList);            //arrList.Add(dataList2);            System.Text.StringBuilder sb = new System.Text.StringBuilder();            System.Web.Script.Serialization.JavaScriptSerializer jscriptSeri = new System.Web.Script.Serialization.JavaScriptSerializer();            jscriptSeri.Serialize(arrList, sb);            context.Response.Write(sb.ToString());        }        public bool IsReusable        {            get            {                return false;            }        }    }    class data    {        public data(string _dTime, float _v)        {            this.dTime = _dTime;            this.V = _v;        }        public string dTime { set; get; }        public float V { set; get; }    }}

.展现效果: