今天在新界面Google Adsense看到如下一个效果,觉得挺不错的:
- 左侧图形Flash表示
- 右侧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); }