dr_paint.js

用VML编写的统计图

//报表数据
function DR_paint(divIndex,rate,colorindex,pWidth,pHeight)
{	
	this.div=divIndex;	//层索引
	this.Rate=rate;					//尺寸比例
	this.CIndex=colorindex;			//选择的颜色体系
	this.DWidth=pWidth;	//宽度
	this.DHeight=pHeight;	//高度
	this.DataSource=new Array();	//数据源	
	this.DataHead= new Array(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,28,29,30,31);	//表头
	this.DataKind=new Array("10%","20%","30%","40%","50%","60%","70%","80%","90%","100%");		//种类
	this.DataHour=new Array();	//小时数
	this.Color=new Array();
	this.Color[0]=new Array("#ffffff","#006400","#228b22","#00ff00","#adff2f","#fafad2","#ffe4e1","#fa8072","#d2691e","#ff0000","#8b0000","#ffffb5");
	this.Color[1]=new Array("#ff0000","#ffA6A6","#ff00ff","#ffaeff","#0000ff","#84aeff","#00ffff","#a6aeff","#00ff00","#b5ffb5","#ffff00","#ffffb5");
	this.drawLine=DR_drawLine;//画line(静态)
	this.drawChangeLine=DR_drawChangeLine;//画line(动态)
	this.drawPie=DR_drawPie;//画饼
	this.drawPole=DR_drawPole;//画柱
	this.drawCalendar=DR_drawCalendar;
	this.collectData=DR_collectData;	//收集数据
	this.draw=DR_draw;
}
//得到某个元素
function $() {
  var elements = new Array();
  
  for (var i = 0; i < arguments.length; i++) {
    var element = arguments[i];
    if (typeof element == 'string')
      element = document.getElementById(element);

    if (arguments.length == 1) 
      return element;
      
    elements.push(element);
  }
  
  return elements;
}
//绘画的调用函数
function DR_draw(param)
{
	var s="";	
	switch(param)
	{
		case 0: s=this.drawPie();break;
		case 1: s=this.drawPole();break;
		case 2: s=this.drawLine();break;
		case 3: s=this.drawCalendar();break;
		case 4: s=this.drawChangeLine();break;
	}
	$("paintDiv"+this.div).innerHTML=s;
	$("DRgroup"+this.div).coordsize=parseInt(3600 / this.Rate)+","+parseInt(3600 / this.Rate);
}
//收集数据
function DR_collectData(dataHead,dataKind,dataRow,data)
{	
	//设置小时
	if(dataHead !=null)
	{
		this.DataHead=dataHead;
	}
	if(dataKind !=null)
	{
		this.DataKind=dataKind;
	}
	if(dataRow !=null)
	{
		this.DataHour=dataRow;	
	}	
	this.DataSource=data;	
}
//画动态线
function DR_drawChangeLine()
{
	if(this.DataSource.length<1)return;
	var intMax=this.DataHour[this.DataHour.length-1];//最大值
	//竖线间距
	var intPWidth=parseInt(3600/(this.DataSource[0].length>1?this.DataSource[0].length:1),10);
	//横线间距
	var intHWidth=parseInt(2400/(this.DataHour.length>1?this.DataHour.length:1),10);
		
	var str="<v:group id='DRgroup"+this.div+"' style='width:"+this.DWidth+";height:"+this.DHeight+";position:absolute;' CoordSize='"+parseInt(3600 / this.Rate)+","+parseInt(3600 / this.Rate)+"'>\n"
		//画底板
		str += "<v:PolyLine Points='200,2400 3800,2400 3800,0 200,0 ' strokecolor='#0099ff'>\n"
	   		str += "<v:fill color='#000000' angle='135' rotate='t' focus='100%' type='solid' />\n"
		str += "</v:PolyLine>\n";
		//画坐标线
		//横
		for(var i=0;i<=this.DataHour.length;i++){
			str += "<v:PolyLine filled='false' Points='200,"+(intHWidth * i)+" 3800,"+(intHWidth * i)+"' strokecolor='#00ff00'/>\n"
		}
		//竖
		for(var i=0;i<=this.DataSource[0].length;i++){
			str += "<v:PolyLine filled='false' Points='"+(200 + intPWidth * i)+",0 "+(200 + intPWidth * i)+",2400' strokecolor='#00ff00'>\n"
				
			str += "</v:PolyLine>\n"
		}
		//箭头线
		//str += "<v:PolyLine filled='false' Points='200,-100 200,2400 3900,2400' StartArrow='Classic' EndArrow='Classic'>"
		//	str += "<v:stroke StartArrow='Classic' EndArrow='Classic'/>"
		//str += "</v:PolyLine>"

		//画左边的坐标
		for(var i=0;i<this.DataHour.length;i++){
			str+="<v:RoundRect style='left:0;top:"+(2400 - intHWidth * (i+1))+";' strokeColor='transparent'>"
				str+="<v:textbox style='font-size:9pt;color:#0099ff;' inset='0pt,0pt,0pt,0pt'>"+this.DataHour[i]+"</v:textbox></v:RoundRect>"
		}
		//画底下的标签
		for (var i=0;i<this.DataHead.length;i++){
			str+="<v:line from='"+(200 + intPWidth * i)+",2410' to='"+(450 + intPWidth * i)+",2410' strokecolor='#ffffff'>"
				str+="<v:TextBox style='font-size:9pt;color:#0099ff;' inset='0pt,0pt,0pt,0pt'>"+this.DataHead[i]+"</v:TextBox></v:line>"
		}
		//画折线
		for(var j=0;j<this.DataSource.length;j++){
			var st = "";
			for(var i=0;i<this.DataSource[j].length;i++){
				st +=" " + (200 + intPWidth*i) +","+ (2400 - parseInt(this.DataSource[j][i]/intMax * 2400,10))
			}
			str += "<v:PolyLine filled='false' Points='"+st+"' strokecolor='"+this.Color[this.CIndex][(j % 12)]+"'/>\n"
		}
		//画右边的图例
		/*for (var i=0;i<this.DataKind.length;i++){
			str+="<v:line from='3850,"+(i*150 + 40)+"' to='3950,"+(i*150 + 40)+"' strokecolor='"+this.Color[this.CIndex][((i+1) % 12)]+"' strokeWeight='5' />";
			str+="<v:line from='3970,"+(i*150)+"' to='4270,"+(i*150)+"' strokecolor='#ffffff' strokeWeight='1'>"
				str += "<v:textbox inset='0pt,0pt,0pt,0pt' style='color:#0099ff;font-size:9pt;'>"+this.DataKind[i]+"</v:textbox></v:line>"
		}*/
	str += "</v:group>"
	return str;
}


//画日历
function DR_drawCalendar(){	
	if(this.DataSource.length<1)return;
	var intMax=0;
	//竖线间距
	var intPWidth=parseInt(3600/(this.DataSource[0].length>1?this.DataSource[0].length:1),10);
	//横线间距
	var intHWidth=parseInt(2400/(this.DataHour.length>1?this.DataHour.length:1),10);
	
	for(var i=0;i<this.DataSource.length;i++){
		for(var j=0;j<this.DataSource[i].length;j++){intMax=(intMax < this.DataSource[i][j]?this.DataSource[i][j]:intMax)}
	}
	intMax=(parseInt(intMax / Math.pow(10,(intMax+"").length - 1)) + 1) * Math.pow(10,(intMax+"").length - 1)
	var str="<v:group id='DRgroup"+this.div+"' style='width:"+this.DWidth+";height:"+this.DHeight+";position:absolute;' CoordSize='3600,3600'>\n"
		//画底板
		str += "<v:PolyLine Points='200,2400 3800,2400 3800,0 200,0 ' strokecolor='#0099ff'>\n"
	   		str += "<v:fill color='#ffffff' angle='135' rotate='t' focus='100%' type='solid' />\n"
		str += "</v:PolyLine>\n";
		//画坐标线
		//横
		for(var i=0;i<=this.DataHour.length;i++){
			str += "<v:PolyLine filled='false' Points='200,"+(intHWidth * i)+" 3800,"+(intHWidth * i)+"' strokecolor='#0099ff'/>\n"
		}
		//竖
		for(var i=1;i<=this.DataSource[0].length;i++){
			str += "<v:PolyLine filled='false' Points='"+(200 + intPWidth * i)+",0 "+(200 + intPWidth * i)+",2400' strokecolor='#0099ff'>\n"
				
			str += "</v:PolyLine>\n"
		}
		//箭头线
		str += "<v:PolyLine filled='false' Points='200,-100 200,2400 3900,2400' StartArrow='Classic' EndArrow='Classic'>"
			str += "<v:stroke StartArrow='Classic' EndArrow='Classic'/>"
		str += "</v:PolyLine>"

		//画左边的坐标
		for(var i=0;i<this.DataHour.length;i++){