Jqplot+asp.net画图实现

说明：最近由于项目的需求研究了一段时间的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

<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 = "ajax/ajaxEngine.aspx";
            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>

后端代码:ajaxEngine.aspx.cs

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class ajax_ajaxEngine : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write(ProcessContent());
        Response.End();
    }
    private string ProcessContent()
    {
        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);
        return sb.ToString();
    }
    class data
    {
        public data(string _dTime, float _v)
        {
            this.dTime = _dTime;
            this.V = _v;
        }
        public string dTime { set; get; }
        public float V { set; get; }
    }
}

.展现效果: