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; }
}
} .展现效果:
优质内容筛选与推荐>>
1、Graphics类
2、（转）所有架构师都应该至少读上两遍的十篇论文
3、Python(2.7.6) 标准日志模块 - Logging Handler
4、POJ 2249
5、MySQL 日期计算