pillarcompare.htc

HTC,demo WEB用于。 超大型

<!--///////////////////////////////////////////////////////////////////////
    // 标题：pillarCompare组件 
    // 说明：三维柱状比较图
    //		 用来处理对比一组数据的走势，例如某一地区本年度相对于上一年度
    //		 各种传染病的发病人数分析(正数代表上升多少，负数代表下降多少)
    // 时间：2004-11-05 
    ///////////////////////////////////////////////////////////////////////-->
<public:component name="pillarCompare" urn="pillarCompare">
	<public:property name="xmlSource" put="putXMLSource" />
	<public:property name="top" put="putTop" get="getTop" />
	<public:property name="left" put="putLeft" get="getLeft" />
	<public:property name="width" put="putWidth" get="getWidth" />
	<public:property name="height" put="putHeight" get="getHeight" />
	<public:property name="hasBorder" put="putHasBorder" />
	<public:property name="hasLegend" put="putHasLegend" />
	<public:property name="psStyle" put="putPsStyle"/>
	<public:property name="borderColor" put="putBorderColor" />
	<public:property name="borderWeight" put="putBorderWeight" />
	<public:property name="backColor" put="putBackColor" />
	<public:property name="caption" put="putCaption" />
	<public:property name="tagID" put="putTagID" />
	<public:property name="yScaleIsInteger" put="putYScaleIsInteger" />
	<public:property name="extrusionColor" put="putExtrusionColor" />
	<public:property name="extrusionDepth" put="putExtrusionDepth" />
	<public:property name="extrusionSingleColor" put="putExtrusionSingleColor" />
	<public:property name="extendCoordinateBaseColor" put="putExtendCoordinateBaseColor" />
	<public:property name="extendCoordinateBackColor" put="putExtendCoordinateBackColor" />
	<public:property name="extendCoordinateLineColor" put="putExtendCoordinateLineColor" />
	<public:method name="refreshData" />
	<public:property name="init" put="initialize" />
	<!--组件封装 language:javascript-->
	<script language="JavaScript">

<!--
var objXMLDoc;
var objContainerDiv = null;//容器
var objInfoSpan = null;

var illnessCnt = 0;//传染病个数
var maxValue = 0;//最大发病数
var spaceValue = 0;//对比柱图间隔距离
var pillarWidth = 0;//柱图宽度
var vTopDistance = 100;

var vLeft = 0;;
var vTop = 0;;
var vWidth = 260;
var vHeight = 260;
var vPsStyle = "1";//1-直方图  2-圆柱图
var booleanHasBorder = true;//是否有边框
var booleanHasLegend = true;//是否有图例
var booleanYScaleIsInteger = false;//y轴刻度是否为整数(默认为false)

var vBorderColor = "#000000";//边框颜色
var vBorderWeight = 1;//边框像素
var vBackColor = "#ffffff";//饼图背景色
var vFillColor2 = "white";//第二种填充色

var vCaption = "";
var vTagID = "";
var booleanSingleExtrusionColor = false;
var vExtrusionColor = "#000000";//柱状图填充色
var vExtrusiondepth = 20;//柱状图深度
var vExtendCoordinateBaseColor = "#A6D2D2";//扩展坐标系基底色
var vExtendCoordinateBackColor = "#cccccc";//扩展坐标系背景色
var vExtendCoordinateLineColor = "#dddddd";//扩展坐标系坐标线颜色

//预置15种颜色作为柱图的分类填充色
var objPillarColorArray = new Array('#CC0000','#66CC00','#990033','#009900','#006699','#006633','#33FFCC','#99CC66','#66FF66','#333366','#FF6699','#FF3399','#FFCC00','#CCFFFF','#000000','#009999','#0066CC','#6699FF','#3300CC','#336600','#CCCC99','#996699','#9933FF','#CCCCCC','#CC3333','#33CCCC','#FF6699','#FFFF00','#66FF00','#000099','#CC9999','#666600','#CCCC33','#FFFFCC','#FF6600','#336666');

//////////////////////////////////////////////////////////////////
function initialize(){//组件初始化操作
	objContainerDiv = window.document.createElement("<div class='phms_pc_containerDiv'/>");
	objContainerDiv = element.appendChild(objContainerDiv);
	objContainerDiv.style.visibility = "visible";
	
	objInfoSpan = element.document.createElement("<span class='phms_pc_errorInfoSpan'>");
	objInfoSpan = element.appendChild(objInfoSpan);
	objInfoSpan.style.visibility = "hidden";
	
	refresh();	
	refreshData();
}

function refreshData(){
	createPlumbPillar();
}

function refresh(){//
	with(element.style){//element位置
		left = vLeft;
		top = vTop;
		width = vWidth;
		height = vHeight;
	}
	with(objContainerDiv.style){
		left = element.style.left;
		top = element.style.top;
		width = element.style.width;
		height = element.style.height;
	}
}

////////////////////////////////////////////////////////////////

function createPlumbPillar(){//装配垂直柱状统计图vml代码

	var oItemNodesList = null		
	var vmlEnd = "";//最终的vml代码
	var vmlPillar = "";//柱图vml代码
	var vmlLegend = "";//图例vml代码
	var vmlTitle = "";//柱图标题vml代码
	var vmlExtendCoordinate = "";//扩展坐标系
	var xScale = 0;
	var yScale = 0;
	var vTitleWidth = 0;
	var oItemNodesList;
	try{
		oItemNodesList = objXMLDoc.selectNodes("//root/item");//节点集	
		objContainerDiv.innerHTML = "";
		if(!oItemNodesList || oItemNodesList.length==0){
			objContainerDiv.style.background = "#cccccc";			
			with(objInfoSpan.style){
				visibility = "visible";	
				width = 120;
				height = 30;
				left = (parseInt(objContainerDiv.style.width) + parseInt(element.offsetLeft))/2 - parseInt(objInfoSpan.style.width)/2;
				top = (parseInt(objContainerDiv.style.height) + parseInt(element.offsetTop))/2 - parseInt(objInfoSpan.style.height)/2;
			}
			objInfoSpan.innerText = "数据加载失败......";
			return;	
		}else{		
			objContainerDiv.style.background = "";
			objInfoSpan.innerText = "";
		}
		
		xScale = Math.ceil(2450/illnessCnt);
		yScale = 100;

		/////////装配柱图标题vml代码////////////////////////
		if(booleanHasLegend){
			if(oItemNodesList.length > 16){
				vTitleWidth = 6100;
			}else{
				vTitleWidth = 4800;
			}
		}else{
			vTitleWidth = 3800;
		}
		if(booleanHasBorder){
			vmlTitle = "<v:rect style='position:absolute;width:" + vTitleWidth + "px;height:2900px;z-index:1;' coordsize='21600,21600' filled='false' strokecolor='" + vBorderColor + "' strokeweight='" + vBorderWeight + "'></v:rect><v:shape style='position:absolute;left:0px;top:120px;width:" + vTitleWidth + "px;height:400px;text-align:center;z-index:1'><div style='font-size:10.5pt;font-weight:bold;'>" + vCaption + "</div></v:shape>";
		}else{
			vmlTitle = "<v:rect style='position:absolute;width:" + vTitleWidth + "px;height:2900px;z-index:1;' coordsize='21600,21600' fillcolor='white' stroked='false'></v:rect><v:shape style='position:absolute;left:0px;top:120px;width:" + vTitleWidth + "px;height:400px;text-align:center;z-index:1'><div style='font-size:10.5pt;font-weight:bold;'>" + vCaption + "</div></v:shape>";
		}
		////////装配扩展坐标系vml代码////////////////
		vmlExtendCoordinate += "<v:shape id='boxleft' fillColor='white' style='position:absolute;width:2000;height:2000;top:" + vTopDistance + ";z-index:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);' path = 'm 500,2500 l 700,2300,3500,2300,3500,300,700,300,500,500,500,2500,x e'><v:fill color2='" + vExtendCoordinateBackColor + "' rotate='t' angle='60' type='gradient'/></v:shape><v:shape id='boxbottom' FillColor='white'style='position:absolute;width:2000;height:2000;top:" + (vTopDistance -1000) + ";filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);z-index:2;' path = 'm 500,2500 l 700,2300,3500,2300,3300,2500,500,2500,x e'><v:fill color2='" + vExtendCoordinateBaseColor + "' rotate='t' angle='70' type='gradient'/></v:shape>";	

		for(var i=0;i<10;i++){//装配扩展坐标系
			//水平左虚线 
			vmlExtendCoordinate += "<v:line  from='500," + (500 + i*200 + vTopDistance) + "' to='700," + (300 + i*200 + vTopDistance) + "' style='z-index:1;' strokecolor='" + vExtendCoordinateLineColor + "' strokeweight='1pt'/>";	
			//水平右虚线
			vmlExtendCoordinate += "<v:line  from='700," + (300 + i*200 + vTopDistance) + "' to='3500," + (300 + i*200 + vTopDistance) + "' style='z-index:1;' strokecolor='" + vExtendCoordinateLineColor + "' strokeweight='1pt'/>";
			//y轴刻度线//////////////////////////////////////////////////////	
			if(booleanYScaleIsInteger && maxValue % 10 != 0){//y轴刻度为整型
				maxValue = maxValue + (10 - maxValue % 10);
			}	
			if(i==5){//0刻度
				vmlExtendCoordinate += "<v:shape style='position:absolute;left:203px;top:" + (2480 - 200*i + vTopDistance) + "px;width:400px;height:100px;z-index:1'><div align='left' style='font-size:8pt;color:black;font-weight:bold;'>0</div></v:shape>";
			}else{//y轴刻度
				if(i>5){
					vmlExtendCoordinate += "<v:shape style='position:absolute;left:200px;top:" + (2480 - 200*i + vTopDistance) + "px;width:400px;height:100px;z-index:1'><div align='left' style='font-size:8pt;'>" + Math.round((maxValue/5)*(i-5)*100)/100 + "</div></v:shape>";
				}else{
					vmlExtendCoordinate += "<v:shape style='position:absolute;left:163px;top:" + (2480 - 200*i + vTopDistance) + "px;width:400px;height:100px;z-index:1'><div align='left' style='font-size:8pt;'>" + Math.round((maxValue/5)*(i-5)*100)/100 + "</div></v:shape>";
				}
			}
		}
		vmlExtendCoordinate += "<v:shape style='position:absolute;left:200px;top:" + (2480 - 200*i + vTopDistance) + "px;width:400px;height:100px;z-index:1'><div align='left' style='font-size:8pt;'>" + Math.round((maxValue/5)*5*100)/100 + "</div></v:shape>";
		//装配扩展坐标系交接线	 
		vmlExtendCoordinate += "<v:line  from='700," + (300 + vTopDistance) + "' to='700," + (2300 + vTopDistance) + "'  style='z-index:1;' strokecolor='" + vExtendCoordinateLineColor + "' strokeweight='1pt'/>";
		/////////装配柱图vml代码////////////////////////////////

		for(var i=0;i<oItemNodesList.length;i++){//装配柱图		
			//柱状图
			////////////////////////////////////
			if(vPsStyle == "2"){//圆柱
				if(parseFloat(oItemNodesList[i].childNodes[1].text) == 0){
					vmlPillar += "<v:rect title='" + oItemNodesList[i].childNodes[0].text + "  " + oItemNodesList[i].childNodes[1].text + "' style='position:absolute;left:" + (650 + (spaceValue + (pillarWidth + spaceValue)*i)) + "px;top:" + (1430 + vTopDistance) + "px;width:" + pillarWidth + "px;height:1px;z-index:4' fillcolor='white'><v:fill color2='" + objPillarColorArray[i] + "' angle='-90' focus='50%' type='gradient'/></v:rect>";
				}else if(!isNaN(parseFloat(oItemNodesList[i].childNodes[1].text)) && parseFloat(oItemNodesList[i].childNodes[1].text) < 0){//小于0
					vmlPillar += "<v:rect title='" + oItemNodesList[i].childNodes[0].text + "  " + oItemNodesList[i].childNodes[1].text + "' style='position:absolute;left:" + (650 + (spaceValue + (pillarWidth + spaceValue)*i)) + "px;top:" + (2400 - 1000 + vTopDistance) + "px;width:" + pillarWidth + "px;height:" + ((Math.abs(parseFloat(oItemNodesList[i].childNodes[1].text)))*1000/maxValue) + "px;z-index:1' fillcolor='white'><v:fill color2='" + objPillarColorArray[i] + "' angle='-90' focus='50%' type='gradient'/></v:rect>";
				}else if(!isNaN(parseFloat(oItemNodesList[i].childNodes[1].text)) && parseFloat(oItemNodesList[i].childNodes[1].text) > 0){//大于0
					vmlPillar += "<v:rect title='" + oItemNodesList[i].childNodes[0].text + "  " + oItemNodesList[i].childNodes[1].text + "' style='position:absolute;left:" + (650 + (spaceValue + (pillarWidth + spaceValue)*i)) + "px;top:" + (2400 - (1000/maxValue)*parseFloat(oItemNodesList[i].childNodes[1].text) - 1000 + vTopDistance) + "px;width:" + pillarWidth + "px;height:" + ((parseFloat(oItemNodesList[i].childNodes[1].text))*1000/maxValue + 30) + "px;z-index:3' fillcolor='white'><v:fill color2='" + objPillarColorArray[i] + "' angle='-90' focus='50%' type='gradient'/></v:rect>";
				}else{//非数值
					vmlPillar += "<v:rect title='" + oItemNodesList[i].childNodes[0].text + "  " + oItemNodesList[i].childNodes[1].text + "(非法数值...)" + "' style='position:absolute;left:" + (650 + (spaceValue + (pillarWidth + spaceValue)*i)) + "px;top:" + (1430 + vTopDistance) + "px;width:" + pillarWidth + "px;height:1px;z-index:4' fillcolor='red'><v:fill color2='" + objPillarColorArray[i] + "' angle='-90' focus='50%' type='gradient'/></v:rect>";
				}
				
				//图例		
				if(booleanHasLegend){
					if(i<16){
						vmlLegend += "<v:shape style='position:absolute;left:3900px;top:" + (300 + i*130 + vTopDistance) + "px;width:1200px;height:100px;z-index:1'><div style='padding-left:5;font-size:12px;' title='" + oItemNodesList[i].childNodes[0].text + "'>" + oItemNodesList[i].childNodes[0].text + "(" + oItemNodesList[i].childNodes[1].text + ")</div></v:shape><v:rect title='" + oItemNodesList[i].childNodes[0].text + "' style='left:3700px;top:" + (320 + i*130 + vTopDistance) + "px;width:120px;height:60px;z-index:1;' fillcolor='white' strokecolor='black'><v:fill color2='" + objPillarColorArray[i] + "' angle='-90' focus='50%' type='gradient'/></v:rect>";
					}else{
						vmlLegend += "<v:shape style='position:absolute;left:" + (3900 + 1200) + "px;top:" + (300 + (i-16)*130 + vTopDistance) + "px;width:1200px;height:100px;z-index:1'><div style='padding-left:5;font-size:12px;' title='" + oItemNodesList[i].childNodes[0].text + "'>" + oItemNodesList[i].childNodes[0].text + "(" + oItemNodesList[i].childNodes[1].text + ")</div></v:shape><v:rect title='" + oItemNodesList[i].childNodes[0].text + "' style='left:" + (3700 + 1200) + "px;top:" + (320 + (i-16)*130 + vTopDistance) + "px;width:120px;height:60px;z-index:1;' fillcolor='white' strokecolor='black'><v:fill color2='" + objPillarColorArray[i] + "' angle='-90' focus='50%' type='gradient'/></v:rect>";
					}			
				}
			}else{//直方图