Jqplot+asp.net画图实现

最新推荐文章于 2024-07-17 17:28:28 发布

windxxf

最新推荐文章于 2024-07-17 17:28:28 发布

阅读量2.6k

点赞数

分类专栏： C# .net 文章标签： asp.net random function stylesheet plot class

C# .net 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

摘自：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; }
    }
}

.展现效果: