jQuery可视化数据显示
http://www.oschina.net/project/tag/275/jquery-chart
1.flot插件
Ole Laursen基于jquery开发的一个图表绘制(WEB Chart)插件，官网http://code.google.com/p/flot/ 可以下载最新版本的插件。
<canvas>是一个新的HTML标签，这个标签可以被Script语言(通常是JavaScript)用来绘制图形。flot插件中就是使用该标签绘制图形的，但在IE浏览器中并不支持该元素，因此如果要在IE浏览器中使用flot绘制图形需要使用一个名为ExCanvas的js库来在IE浏览器中模拟<canvas>标签的图形绘制操作，在flot官网下载的文件中会包含该ExCanvas.js。
flot.htm
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.flot.js" type="text/javascript"></script>
<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]--> IE浏览器下该代码才生效
<script type="text/javascript">
$(document).ready(function(){
$.ajax({type:"GET",url:"Handler1.ashx",success:function(data,status){
var flot=eval('('+data+')').json
$.plot($("#flot"),flot); $.plot()是flot的核心函数
},dataType:"JSON"});
})
</script>
<div id="flot" style="height:300px; width:300px;"> 需要设置目标元素的高和宽,否则不会有任何效果
</div>
函数原型 $.plot(placeholder,flotdata,options)
placeholder是用来展示图形的元素，可以是jQuery对象或DOM元素，最好是div
flotdata是一个json对象组成的数组，每个json对象的格式也有规定，如下:
{label:"说明",data:[[x,y],[x,y],[x,y],[x,y]],color:color or number......} 具体可参考xuqing3344520的博客
可以看到data键的值是一个二维数组，并且x和y必须为数字，如果是折线图等的话 x代表x轴上的坐标 y代表y轴上的坐标
Handler1.ashx返回的json对象的值就是flotdata，可以像如下那样：
{json: [ {label:'学生1',data:[[1,0.5],[2,2.5],[3,3]]}, {label:'学生2',data:[[1,2],[2,3],[3,4]]}, {label:'学生3',data:[[1,3],[2,4],[3,5]]} ] }
在flot.htm得到该json对象的键的值后就可以将之添加到$.plot()函数里了
对于图形的样式可以通过设置第三个参数options来实现
options参数本身也是一个json对象，如可以像如下设置：
var options={lines:{show:true},points:{show:true,radius:4},legend:{show:true,margn:100,backgroundOpacity:0.5}};
显示折线，显示折线间的点并且点的半径是4像素，显示标签,标签之间有间隔,标签半透明
现在再添加一个功能就是当鼠标放到某个point上的时候该点会突出显示并且显示该点的信息
可参考http://weblogs.asp.net/rachit/archive/2010/01/26/jquery-flot-charts-with-time-series.aspx
该点会突出，仍然要设置options参数
var options={grid:{hoverable:true,clickable:true}};
显示该点的信息，先定义一个显示信息的函数
function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
position: 'absolute',
display: 'block',
"z-index": 10,
top: y + 5,
left: x + 5,
border: '1px solid #e17009',
padding: '3px',
'background-color': '#fee',
opacity: 0.70,
margin: '5px',
'font-size': '10px'
}).appendTo("body").fadeIn(200);
}
当鼠标移到一个点上时会触发一个事件，flot将该事件定义为plothover
var previousPoint=null; 设置一个全局变量,代表移动鼠标之前的那个点
$("#flot").bind("plothover",function(event,pos,item){
if(item){ 判断有没有该点信息
if(previousPoint!=item.dataPoint){ 判断这次的点是否与之前的点是同一个点
previousPoint=item.dataPoint;
$("#tooltip").remove();
var x=item.dataPoint[0].toFixed(2);
var y=item.dataPoint[1].toFixed(2);
showTooltip(item.pageX,item.pageY,item.series.label+"("+x+","+y+")");
}
}else{
$("#tooltip").remove();
previousPoint=null;
}
})
item参数 item{datapoint:当前点 series:当前点所在的json对象 pageX,pageY:当前点在整个屏幕中的坐标}
datapoint[0] 当前点的x轴坐标 datapoint[1] 当前点的y轴坐标
flot画饼状图
http://blog.csdn.net/xmphoenix/archive/2011/04/03/6300163.aspx
flot画条状图只是设置options参数就可以
var options={lines:{show:true},points:{show:true,radius:4},bars:{show:true}};
http://www.cnblogs.com/qinhaijun/archive/2009/08/04/1539069.html
其他参考链接
http://www.gsls.info/archives/48.html
http://blog.csdn.net/yanqlv/archive/2009/12/19/5039067.aspx
http://www.cnblogs.com/JerryWang1991/archive/2011/06/24/2089338.html