dr_paint.js

用VML编写的统计图

			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.DataSource[0].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='4pt,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:rect filled='true' stroked='f'  style='width:"+(intPWidth -5)+";height:"+(intHWidth-5)+";left:"+(200 + intPWidth*i)+";top:"+(2400 -(intHWidth*(j+1)))+";' fillcolor='"+this.Color[this.CIndex][(this.DataSource[j][i] % 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='4370,"+(i*150)+"' strokecolor='#ffffff' strokeWeight='2'>"
				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_drawPie(){//arInt：那一组数据	
	if(this.DataSource.length<1) return "";	
	var maxScale = 1<<16,intTotal=0
	for (var i=0;i<this.DataSource[0].length;i++)intTotal+= parseInt(this.DataSource[0][i]);
	//开始画
	var str="<v:group id='DRgroup"+this.div+"' style='width:"+this.DWidth+";height:"+this.DHeight+";position:absolute;' CoordSize='3600,3600'>\n"
		//画底下的圆饼
		str += "<v:shape style='width:10;height:10;' CoordSize='1,1'>\n"
			str += "<v:path v='ae 300,200,200,200,3932100,23592960 xe' />\n"
			str += "<v:extrusion v:ext='view' on='t'  rotationangle='80,-10' backdepth='10' color='#0086c6' />\n"
		str += "</v:shape>\n"
		//画各部分的饼块
		var numStart=0,numScale=0;
		for (var i=0;i<this.DataSource[0].length;i++){
			numScale=(this.DataSource[0][i] / intTotal) * maxScale * 360;
			str += "<v:shape style='width:10;height:10;' CoordSize='1,1'>\n"
				str += "<v:path v='m 300,200 ae 300,200,200,200,"+parseInt(numStart)+","+parseInt(numScale)+" xe' />\n"
				str += "<v:fill color='"+this.Color[this.CIndex][i  % 12]+"' color2='"+this.Color[this.CIndex][(i  % 12) + 1]+"' rotate='t' focus='100%' type='gradient' />\n"
				str += "<v:extrusion v:ext='view' on='t'  rotationangle='80,-10' backdepth='0' />\n"
			str += "</v:shape>\n"
			numStart+=numScale
		}
		//画右边的图例
		var intTmp=0
		for (var i=0;i<this.DataSource[0].length;i++){
			str += "<v:rect style='top:"+(i*200)+";left:4500;width:100;height:100;' strokecolor='#0099ff' fillcolor='"+this.Color[this.CIndex][(i % 12)]+"'></v:rect>"
			str+="<v:line from='4600,"+(i*200)+"' to='5500,"+(i*200)+"' strokecolor='#ffffff' strokeWeight='2'>"
				str += "<v:textbox inset='0pt,0pt,0pt,0pt' style='color:#0099ff;font-size:9pt;'>"+this.DataHead[i]+":"+(i==this.DataSource[0].length - 1?(10000 - intTmp)/100:parseInt(this.DataSource[0][i] / intTotal * 10000) /100)+"%</v:textbox></v:line>"
			intTmp += parseInt(this.DataSource[0][i] / intTotal * 10000)
		}
	str += "</v:group>\n"
	return str
}
//画线
function DR_drawLine(){		
	if(this.DataSource.length<1)return;
	var intMax=0,intPWidth=parseInt(3600 / (this.DataSource[0].length>1?this.DataSource[0].length - 1: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='#00cfef' angle='135' rotate='t' focus='100%' type='gradient' />\n"
		str += "</v:PolyLine>\n"
		//画坐标线
		for(var i=1;i<10;i++){
			str += "<v:PolyLine filled='false' Points='200,"+(240 * i)+" 3800,"+(240 * 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:stroke dashstyle='Dash' />\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=1;i<11;i++){
			str+="<v:RoundRect style='left:0;top:"+(2400 - 240 * i)+";' strokeColor='transparent'>"
				str+="<v:textbox style='font-size:9pt;color:#0099ff;' inset='0pt,0pt,0pt,0pt'>"+(i*(intMax / 10))+"</v:textbox></v:RoundRect>"
		}
		//画底下的标签
		for (var i=0;i<this.DataSource[0].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 % 12)]+"' strokeWeight='5' />"
			str+="<v:line from='3970,"+(i*150)+"' to='4370,"+(i*150)+"' strokecolor='#ffffff' strokeWeight='2'>"
				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_drawPole(){	
	if(this.DataSource.length<1)return;
	//	数据最大值，数组元素个数							每个柱子的宽度							柱与柱间的间隔
	var intMax=0,intTotal=this.DataSource[0].length + 1,intPWidth=parseInt(1800 / intTotal,10),intPad=intPWidth * 2;
	intPWidth=(intPWidth>300?300:intPWidth);

	for(var i=0;i<this.DataSource[0].length;i++){intMax=(intMax < this.DataSource[0][i]?this.DataSource[0][i]: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='400,2400 200,2600 3800,2600 4000,2400' strokecolor='#0099ff'>\n"		//底
	   		str += "<v:fill color='#00cfef' angle='45' rotate='t' focus='100%' type='gradient' />\n"
		str += "</v:PolyLine>\n"
		str += "<v:PolyLine Points='400,2400 200,2600 200,200 400,0 ' strokecolor='#0099ff'>\n"		//左
	   		str += "<v:fill color='#00cfef' angle='210' rotate='t' focus='100%' type='gradient' />\n"
		str += "</v:PolyLine>\n"
		str += "<v:PolyLine Points='400,0 4000,0 4000,2400 400,2400 ' strokecolor='#0099ff'>\n"
	   		str += "<v:fill color='#00cfef' angle='135' rotate='t' focus='100%' type='gradient' />\n"	//正
		str += "</v:PolyLine>\n"
		//画虚线
		for(var i=1;i<10;i++){
			str += "<v:PolyLine filled='false' Points='200,"+(2600 - 240 * i)+" 400,"+(2400 - 240 * i)+" 4000,"+(2400 - 240 * i)+"' strokecolor='#0099ff'>\n"
				str += "<v:stroke dashstyle='Dash' />\n"
			str += "</v:PolyLine>\n"
		}
		//画左边的坐标
		for(var i=1;i<11;i++){
			str+="<v:RoundRect style='left:0;top:"+(2600 - 240 * i)+";' strokeColor='transparent'>"
				str+="<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;color:#0000ff;'>"+(i*(intMax / 10))+"</v:textbox></v:RoundRect>"
		}
		//画底下的标签
		for (var i=0;i<this.DataSource[0].length;i++){
			str+="<v:RoundRect style='left:"+(400 + parseInt(intPad * (i + 0.5),10) - parseInt((intPWidth / 2)))+";top:2600;' strokeColor='transparent'>"
				str+="<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;color:#0099ff;'>"+this.DataHead[i]+"</v:textbox></v:RoundRect>"
		}

		//画柱状图
		for(var i=0;i<this.DataSource[0].length;i++){
			str += "<v:PolyLine Points='"+(400 + parseInt(intPad * (i + 0.5),10))+",2400 "+(400 + parseInt(intPad * (i + 0.5),10))+","+(2400 - parseInt(this.DataSource[0][i]/intMax * 2400,10))+" "+(400 + parseInt(intPad * (i + 0.5),10) + intPWidth)+"," +(2400 - parseInt(this.DataSource[0][i]/intMax * 2400,10))+" "+(400 + parseInt(intPad * (i + 0.5),10) + intPWidth)+",2400 ' strokecolor='#ffffff'>\n"
		   		str += "<v:fill color='"+this.Color[this.CIndex][(i % 12)]+"' angle='150' rotate='t' focus='100%' type='gradient' />\n"
		   		str += "<v:extrusion v:ext='view' on='t' backdepth='0' foredepth='"+(parseInt(intPWidth / 10))+"' />\n"
			str += "</v:PolyLine>\n"
		}
		//画每根柱的数据量
		for (var i=0;i<this.DataSource[0].length;i++){
			str+="<v:RoundRect style='left:"+(400 + parseInt(intPad * (i + 0.5),10))+";top:"+(2400 - parseInt(this.DataSource[0][i]/intMax * 2400 + 100))+";' strokeColor='transparent'>"
				str+="<v:textbox inset='0pt,0pt,0pt,0pt' style='font-size:9pt;color:#ff00ff;'>"+this.DataSource[0][i]+"</v:textbox></v:RoundRect>"
		}
	str += "</v:group>"
	return str
}