Jqplot+asp.net画图实现
摘自：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; }
}
}
.展现效果:
