<script language="javascript">
jQuery(function(){
var i = 0;//起始索引
var o = $(".images");//统计图对象
var l = o.length;//统计图的数量
var options = new Object;//统计图参数
odrImage(i);
function odrImage(i){
var oi = o.eq(i);
if(i<l){
$.post("/?r=ajaxOdrData",{"cid":oi.attr("cid")},function(data){
if(data){
options.maxval = 5000;
options.title = oi.attr("cname"); //标题
options.datas = jQuery.parseJSON(data);
oi.empty().zImage(options);
odrImage(++i)
}
})
}
return false;
}
})
</script>
(function($){
$.fn.zImage = function(options){
if(!(options instanceof Object)){alert("参数是个对象");return false;}
var title = 'title' in options ? options.title : "标题";
var datas = options.hasOwnProperty('datas') ? options.datas : [];
var total = $.itotal(datas);//总数
var length = total.length;//数组长度
var datas = total.data;//数据
var tags = total.tag;//标签
var hrefs = total.href;//连接
var colors = total.color;//颜色
//============画布
var canvas = new Object();
var cW = 430;//画布的宽
var cH = 250;//画布的高
var canvasStyle;
//默认样式
if('canvas' in options){
cW = options.canvas.width ? parseInt(options.canvas.width) : cW;
cH = options.canvas.height ? parseInt(options.canvas.height) : cH;
canvasStyle = options.canvas
}
canvas.defaults = {width:cW+"px",height:cH+"px",background:"#FFFFFF",position:"relative"};
var opts = $.extend(canvas.defaults,canvasStyle);
this.css(opts);
//===========标题
var tH = 30;//标题的高
var tT = 20;//向上偏移量
var titleT = $("<div>").css({"position":"relative","text-align":"center","height":tH+"px","font-size":"24px","font-weight":"bold","top":tT+"px"}).text(title);
this.append(titleT);
//===========X轴网格
var lineX;//X轴网格线
var tagX;//x轴tag
var lxB;//每个网格的下偏移量
var xB = 30;//下偏移量
var xL = 50;//左偏移量
var lxS = 'numx' in options ? options.numx :6;//网格的数量
var txW = 'xw' in options ? options.xw :20;//调节网格间隔基数
var lxW = (cH-tH-tT-xB-20)/lxS;//网格间隔
var xW = cW-xL-5;//x轴的长度
var showSize;//Y轴显示的最大值
if('maxval' in options){
showSize = options.maxval;
}else{//自动判断Y轴的最大值
showSize = total.mval;
var sl = String(showSize).length;
var sj = new Array(sl).join("0");
var sc = parseInt("1"+sj);
var ss;
for(var f=1;f<100;f++){
ss = f*sc*lxS;
if(ss > showSize){
showSize = ss;
break;
}
}
}
var tD = showSize/lxS;//y轴上显示的基数
var bg;
for(var i=0;i<=lxS;i++){
lxB = (i * lxW)+xB;
tagD = Math.round(i*tD);
bg = i==0 ? "#000000":"#CCCCCC";
lineX = $("<div>").css({width:xW+"px",height:"1px",left:xL+"px",background:bg,position:"absolute",bottom:lxB+"px","font-size":"0px","overflow":"hidden"});
tagX = $("<div>").css({position:"absolute",bottom:lxB+"px",right:(xW+8)+"px","font-size":".8em","color":"#333333","line-height":".8em"}).text(tagD);
this.append(lineX).append(tagX);
}
//===========Y轴网格
var lineY;//Y轴网格线
var tagY;//Y轴tag
var sizeY;//数据上显示的数值
var sizeHref;//数值上的链接
var lyL;//每个网格的左偏移量
var yH = lxW*lxS;//y轴的高
var yL = 50;//左偏移量
var lyS = length;//网格数量
var lyW = (cW-xL-10)/lyS;//网格间隔
var tdW = 'dw' in options ?options.dw : 20;//调节数据宽度基数
var dW = (lyW-tdW)>0 ? (lyW-tdW-10) : lyW-10;//数据宽度
var yB = xB;//y轴下偏移量
var dH;//数据的高度
var dC;//数据的颜色
for(var i=0;i<=lyS;i++){
lyL = (i * lyW)+yL;
bg=i==0?"#000000":"#CCCCCC";
if(i>0){
dH = Math.round(datas[i]*lxW/tD);
dC = colors[i]? colors[i] : "#FF6600";
dataY = $("<div>").css({width:dW+"px",height:dH+"px",background:dC,position:"absolute",left:(lyL-(dW+lyW)/2)+"px",bottom:yB+"px","font-size":"0px","overflow":"hidden"});
tagY = $("<div>").css({position:"absolute",left:(lyL-lyW)+"px",bottom:(yB-20)+"px","text-align":"center",width:lyW+"px","font-size":".8em","color":"#333333"}).text(tags[i]);
sizeHref = $("<a>").attr({"target":"_blank","href":hrefs[i],'title':tags[i]}).text(datas[i]).css({"text-decoration":"none","color":"#0099CC","font-size":".8em"}).hover(function (){$(this).css("color","#FF0000");},function (){$(this).css("color","#0099CC");});
sizeY = $("<div>").css({position:"absolute",left:(lyL-lyW)+"px",bottom:(yB+dH+5)+"px","text-align":"center",width:lyW+"px"}).html(sizeHref);
this.append(tagY).append(dataY).append(sizeY);
}
lineY = $("<div>").css({width:"1px",height:yH+"px",background:bg,position:"absolute",left:lyL+"px",bottom:yB+"px"});
this.append(lineY);
}
}
//计算数据总值
$.itotal = function(array){
var length = 0;
var color = [0];
var href =[0];
var tag = [0];
var data = [0];
var mval = 0;
var dt = 0;
$.each(array,function(k,v){
length++;
dt = parseInt(v['data']);
mval = mval > dt ? mval:dt;
data.push(dt);
href.push(v['href']);
color.push(v['color']);
tag.push(k);
})
//console.log(data);
return {"mval":mval,"length":length,"data":data,"tag":tag,"href":href,"color":color};
}
//取最大值
$.maxval = function(array){
var sarray = array.sort(function(a, b){return b-a;});
return sarray[0];
}
})(jQuery)