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......}

可以看到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参数

datapoint[0] 当前点的x轴坐标   datapoint[1] 当前点的y轴坐标


flot画条状图只是设置options参数就可以

var options={lines:{show:true},points:{show:true,radius:4},bars:{show:true}};

其他参考链接

http://www.gsls.info/archives/48.html