实现类似Google Adsense图与Js联动效果

今天在新界面Google Adsense看到如下一个效果，觉得挺不错的：

 

 

1. 左侧图形Flash表示
2. 右侧HTML普通内容，但复选框背景色与Flash中的底色相同

刚好最近手头上项目也有类似的需求，所以整理了一下，图表控件用的是amCharts，所以一下的代码都是针对amCharts展开！

画图没啥好说的，我将后台所有的画图曲线存在单独的数据库配置表中，查询后的结果换到到ehCache中，amCharts提供了很丰富的js回调函数，所以想实现以上的功能，主要用到的回调函数：

	function amReturnSettings(chart_id, settings){
		  var data = decodeURIComponent(settings);
		   var xml;
		   if($.browser.msie){
	        if( typeof data == "string" ){
	                 xml = new ActiveXObject("Microsoft.XMLDOM");
	                 xml.async = false;
	                 xml.loadXML(data);
	        } else {
	                 xml = data; 
	        }
		   }else{
			   xml = data; 
		   }
		 $(xml).find("graphs > graph").each(function(i,n){			 
			 $(this).find("title").each(function(ii,nn){
				$("#zb_ullist").append("<input type=\"checkbox\" checked='checked'  "+value=\""+i+"\"/>"+$(this).text());
				var pp = "graphs.graph["+i+"].color";
				flashMovie.getParam(pp);
			 });
			 
		  });
} 

 

将从返回的XML设置文件中，提取每条曲线的color，然后利用getParam的回调函数，做背景色的设置工作：

	function amReturnParam(chart_id, value, param_name){
		  if(param_name.indexOf("].color")>=0){
			  var idx = param_name.match(/\[(\S*)\]/i)[1];
			  var ccolor = "#"+(parseInt(value).toString(16));
			  $("#t_chk_"+idx).css("background-color",ccolor);
		  }
		  
	}

 

复选框的选中toggle曲线效果，利用利用以下代码：

 

	function toggleShow(chart_id,obj){
		 flashMovie = document.getElementById(chart_id);
		 if(obj.checked)
			flashMovie.showGraph(obj.value);
		 else
		 	flashMovie.hideGraph(obj.value);
	}