flot 插件 --- 鼠标点击和滑过标签的简单动画

最近公司有项目做前端的数据报表。
采用了jQuery 的一个图形插件 Flot.(http://code.google.com/p/flot/)。
Flot 是基于canvas 的纯javascript的绘图工具，支持 Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+
在excanvas的支持下， 顽固的IE6也支持canvas绘图。（性能有点差）

有需求是鼠标滑过标签的时候可以高亮显示，点击的时候合适随意隐藏一个图形。
花了一天的时间写了一个插件，趁周末整理了一下。
可以设置的参数有 5 个

* legend.labelEvent:boolean !//是否启用  默认不启用
* legend.overWidth: number, //(px) 鼠标滑过的时候线条的宽度
* legend.removeColor:"#fff",//(color) 线条被移除后 标签显示的颜色
* legend.removeLabelBoxBorderColor:"#ccc",//(color) 线条移除后，标签边框的颜色
* legend.reDraw: boolean // 是否重新绘制图形的位置， 默认是否。

注意：与其他插件同时使用时 如果其他插件 调用了setupGrid() 这个方法，图形也会被重绘。

实现的简单介绍：
1.初始时，记录原始的数据，和生成都标签（重绘后 数据和标签会改变）
2.获取相应的标签  并添加事件。
注意：args 变量不可以是全局的， 因为如果同一个页面有两个以及以上的图形的时候会冲突。

args.options = $.extend(true, {}, {legend: params}, plotOptions);
if(args.currentPlot.labelEvent == undefined) {//init all label!  保存所有的数据和对应的标签
	args.currentPlot.labelEvent = {
		_legendContainer: getLegendContainer(plot),//数据被清空的时候 保存
		_legend:getLegend(plot),//所有标签
		_showLabel:[],//该标签所对应的数据是否可显示
		_labelWidth:[]//该数据的线条 默认的宽度
	};
	var legend = args.currentPlot.labelEvent._legend;
	args.currentPlot.nataveData = $.extend(true, {}, args.data);
	args.options._noReDrawed_ = true;//this is reDraw by other plug! if this is reDrawed by other plug ,and it's undefined!
	getBoundElement(legend).each(function(i){
	elementEventBound($(this), i, args);
	});
}else if(args.currentPlot.labelEvent._legend.get(0) != getLegend(plot).get(0)) {//判断标签是否被重绘了   即是否调用了  setupGrid() 这个方法
	var legend = replaceLegend(plot, args.currentPlot.labelEvent._legend);
	getBoundElement(legend).each(function(i){
	elementEventBound($(this), i, args);
	});
}

实现比较简单，部分使用功能没有实现，比如自由的添加事件，等等....

SVN  地址 ： http://lineblog.googlecode.com/svn/trunk/javascript/flot/
     文件夹下面  jquery , flot 请另行下载，或者使用附件中文件！

转载请保留出处：http://lchshu001.iteye.com/blog/1325410

2011-12-26 12:00 修复一个错误!
2011-12-28 15:00 修复IE下的Bug(后面的下载直接替换即可！)

评论

2 楼 kelloKitty 2011-12-26  

学习一下。

1 楼 kelloKitty 2011-12-26  

不错。看看