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