mypolyline.htc

HTC,demo WEB用于。 超大型

<!--///////////////////////////////////////////////////////////////////////
    // 标题：polyLine组件 ///////////////////////////////////////////////////
    // 时间：2004-03-25 ///////////////////////////////////////////////////
    ///////////////////////////////////////////////////////////////////////-->

<public:component name="PolyLineGrphics" urn="PolyLineGrphics">
<public:property name="xmlSource" put="putXMLSource"/>

<public:property name="xAxes" value="x"/>
<public:property name="yAxes" value="y"/>

<public:property name="xColor" value="#000000"/>//x轴颜色
<public:property name="yColor" value="#000000"/>//y轴颜色
<public:property name="xDescriptionColor" value="#000000"/>//x轴刻度描述文字颜色
<public:property name="yDescriptionColor" value="#000000"/>//y轴刻度描述文字颜色
<public:property name="coordinateWeight" value="1"/>//坐标轴线粗细程度

<public:property name="textCol"/>//对应XML数据文件中点的x轴描述文字
<public:property name="valueCol"/>//对应XML数据文件中点的y轴的值

<public:property name="hasBrokenLine" value="true"/>//是否有虚刻度线
<public:property name="voidColor" value="gray"/>//虚线颜色

<public:property name="caption" put="putCaption"/>//折线图标题
<public:property name="captionColor" value="#000000"/>//折线图标题字体颜色
<public:property name="lineWeight" value="1.1"/>//折线粗细程度
<public:property name="titleWidth" value="70"/>//折线描述文字矩形框的宽度
<public:property name="titleBgcolor" value="red"/>//标题描述文字矩形的背景色
<public:property name="titleColor" value="yellow"/>//标题描述文字矩形的背景色

<public:property name="top"  put="putTop"/>
<public:property name="left" put="putLeft"/>
<public:property name="width" put="putWidth"/>
<public:property name="height" put="putHeight"/>

<public:property name="refresh" put="refresh"/>//行为属性,用于重画组件
<public:property name="init" put="initialize"/>//组件初始化

<!--组件封装 language:javascript-->

<script language="JavaScript">

<!--
var objXMLDocSource,objXMLDoc;
var objDataArea = null;//折线图显示区域
////////////////////////////////////////////////////////
var vLeft = 40;
var vTop = 50;
var vWidth = 850;
var vHeight = 250;
var yLength = 0;
var xLength = 0;
var vXScale;
var vYScale;
var vYValueScale;
var intLineTop;
var intConstBoard = 25;
var vDivisor = 0;
var vMaxY = 0;
var vVPerHeight;
var b =1;
var vCaption = "";

var objGlobal;

var pointDescription = new Array();//折线点的x轴描述文字
//预置polyline配色[15种]
var lineColorArray = new Array('red','#993399','#0099FF','#CC9933','#339933','#FFCC33','#009999','#CC99FF','#99FF33','#FFFF33','#666699','black','#66FFFF','#FF00FF','#0000FF');

function getPointDescription(){//获取横坐标的描述文字装入pointDescription对象

  var objNode;  
  //按col子节点最大进行排序
  var vXSLT = "<?xml version=\"1.0\" encoding=\"UTF-8\"?><xsl:stylesheet version=\"1.0\" xmlns:xsl=\"http://www.w3.org/1999/XSL/Transform\" xmlns:fo=\"http://www.w3.org/1999/XSL/Format\"><xsl:output method=\"xml\" omit-xml-declaration=\"no\" encoding=\"gb2312\" version=\"1.0\" indent=\"yes\"/><xsl:template match=\"/root\"><xsl:for-each select=\"col\"><xsl:sort select=\"count(child::node())\" data-type=\"number\" order=\"descending\"/><xsl:copy-of  select=\".\"/></xsl:for-each></xsl:template></xsl:stylesheet>";
  objNode = objGlobal.inputXML("<root>" + objGlobal.transformXML(objXMLDoc,vXSLT) + "</root>"); 
  // debugger;
  for(var i=0; i<objNode.childNodes[0].childNodes[0].childNodes.length;i++){//
    pointDescription.push(objNode.childNodes[0].childNodes[0].childNodes[i].getAttribute(textCol));
  }
}

function putXMLSource(argSource){
	objXMLDocSource = inputXML(argSource);
	if(objXMLDocSource == null) return;
	objXMLDoc = inputXML(objXMLDocSource);	
}

function calcuScaleOfX(){//计算x轴刻度单位  

	if(!objXMLDoc) return;  
  var oNodeCol = objXMLDoc.selectNodes("/*/col");//所有折线集合
  var vLengthCol = 0;   
    
  if(!oNodeCol) return; 
  
  for(var i=0;i<oNodeCol.length;i++){ //便历所有col节点
    vLengthCol = oNodeCol[i].childNodes.length;
    vDivisor = Math.max(vDivisor,vLengthCol);
  }  
  getMaxValueOfY();
  getPointDescription();//返回x轴坐标描述文字
}

function getMaxValueOfY(){//返回纵坐标每个刻度对应的实际点值的大小

  var oNodeCol = null;
  var vMax = 0;//最大值  

	if(!objXMLDoc) return;  
  
  oNodeCol = objXMLDoc.selectNodes("/*/col/r");//所有r节点集合
  if(!oNodeCol) return;
  
  for(var i=0;i<oNodeCol.length;i++){ //便历所有r节点    
    vMax = parseFloat(oNodeCol[i].getAttribute(valueCol));
    vMaxY = Math.max(vMax,vMaxY);
  }  
//debugger;
  vYValueScale = Math.round(vMaxY/vDivisor*100)/100;//y轴刻度单位
  
}

function paintCoordinate(){ //画坐标系

	if(!objXMLDoc) return;  
  yLength = vHeight;
	xLength = vWidth - 100;

	vXScale = xLength/vDivisor;
	vYScale = yLength/(vDivisor + 3);
  
	var vVML = "<v:group id='vg1' style='position:absolute;border:0px solid red;top:0;left:0;width:1024px;height:768px' coordsize='1024,768'>";
  
  
  //表头	
	vVML += "<v:line style = 'position:absolute;left:-50;height:1;top:0;width:" + vWidth + ";'><v:textbox style='font-family:宋体;font-size:10.5pt;text-align:center;font-weight:bold;color:" + captionColor + ";'>" + vCaption + "</v:textbox></v:line>";
  
  //y轴	
	vVML += "<v:line style = 'position:absolute;border:0 solid green;left:0;top:0' from='35,15' to='35," + (yLength-intConstBoard) + "'' strokeweight='" + coordinateWeight + "' strokecolor='" + yColor + "' coordsize='0,0'><v:stroke startarrow='open' endarrow='close'/></v:line>";
	
		
	//x轴		
	vVML += "<v:line style = 'position:absolute;left:0;top:0' from='35," + (yLength-intConstBoard) + "' to='" + (xLength - intConstBoard + 20) + "," + (yLength-intConstBoard) + "' strokeweight='" + coordinateWeight + "' strokecolor='" + xColor + "' coordsize='0,0'><v:stroke startarrow='close' endarrow='open'/></v:line>";
	vVML += "<v:rect style='position:absolute;border:0px solid green;wordWrap:break-word;left:" + (xLength - 13) + ";top:" +  (yLength - intConstBoard - 2) + ";' coordsize='21600,21600'><v:textbox style='width:" + vXScale + ";color:red;border:0px solid red;margin-top:0; margin-left:0;'>" + xAxes + "</v:textbox></v:rect>";
	
	for(var i=1;i< parseInt(vDivisor);i++){//横坐标刻度线	
	  if(hasBrokenLine.toString() == "true"){
	      vVML += "<v:line style = 'position:absolute;left:0;top:0;' from='" + (35+i*vXScale + 10) + ", " + (yLength-intConstBoard) + "' to='" + (35+i*vXScale + 10) + ", 25' coordsize='0,0' strokecolor='" + voidColor +  "'><v:stroke dashstyle='0,2' endcap='round'/></v:line>";
	      //x轴描述文字
	      vVML += "<v:rect style='position:absolute;border:0px solid green;wordWrap:break-word;left:" + ((35+(i-1)*vXScale) - 10) + ";top:" +  (yLength - intConstBoard) + ";' coordsize='21600,21600'><v:textbox style='width:" + vXScale + ";color:" + xDescriptionColor + ";font-size:6.5pt;font-family:宋体;border:0px solid red;margin-top:0; margin-left:0;'>" + pointDescription[i-1] + "</v:textbox></v:rect>";
	      vVML += "<v:line style = 'position:absolute;color:red;left:0;top:0;' from='" + (35+i*vXScale + 10) + "," + (yLength-intConstBoard) + "' to='" + (35+i*vXScale + 10) + "," + (yLength-intConstBoard - 2) + "' coordsize='0,0' strokecolor='#000000'></v:line>";      
	  }else{
	    if(i!= parseInt(vDivisor)){
	        vVML += "<v:line style = 'position:absolute;color:red;left:0;top:0;' from='" + (35+i*vXScale) + "," + (yLength-intConstBoard) + "' to='" + (35+i*vXScale) + "," + (yLength-intConstBoard - 3) + "' coordsize='0,0' strokecolor='#000000'></v:line>";      
	        vVML += "<v:rect style='position:absolute;border:0px solid green;wordWrap:break-word;left:" + ((35+(i-1)*vXScale) - 20) + ";top:" +  (yLength - intConstBoard) + ";' coordsize='21600,21600'><v:textbox style='width:" + vXScale + ";color:" + xDescriptionColor + ";font-size:7pt;font-family:arial;border:0px solid red;margin-top:0; margin-left:0;'>" + pointDescription[i-1] + "</v:textbox></v:rect>";
	      }
	  }
	}	
	//x轴最后一个文字描述
	vVML += "<v:rect style='position:absolute;border:0px solid green;wordWrap:break-word;left:" + ((35+(parseInt(vDivisor)-1)*vXScale) - 10) + ";top:" +  (yLength - intConstBoard) + ";' coordsize='21600,21600'><v:textbox style='width:" + vXScale + ";color:" + xDescriptionColor + ";font-size:6.5pt;font-family:宋体;border:0px solid red;margin-top:0; margin-left:0;'>" + pointDescription[parseInt(vDivisor)-1] + "</v:textbox></v:rect>";
	
	for(var i=0;i<= parseInt(vDivisor);i++){//纵坐标刻度线
	
	  intLineTop = yLength-(i*vYScale+intConstBoard);
	  if(i == parseInt(vDivisor))	  
	    vVML += "<v:rect style='position:absolute;border:0 solid red;left:0;top:" + (parseInt(intLineTop) - vYScale - 20) + ";' coordsize='21600,21600'><v:textbox style='color:red;'>" + yAxes + "</v:textbox></v:rect>";
	  if(hasBrokenLine.toString() == "true"){  
      vVML += "<v:line style = 'position:absolute;top:0;left:0;' from='35," + intLineTop + "' to='" + (xLength - intConstBoard) + "," + intLineTop + "' coordsize='0,0' strokecolor='" + voidColor + "'><v:stroke dashstyle='0,2' endcap='round'/></v:line>"; 	    
	    
	    vVML += "<v:line style = 'position:absolute;top:0;left:0;' from='35," + intLineTop + "' to='37," + intLineTop + "' coordsize='0,0' strokecolor='#000000'></v:line>"; 	    
    }else{
      vVML += "<v:line style = 'position:absolute;top:0;left:0;' from='35," + intLineTop + "' to='38," + intLineTop + "' coordsize='0,0' strokecolor='#000000'></v:line>"; 	    
	  }
	  if(vYValueScale != 0)
      vVML += "<v:rect style='position:absolute;border:0px solid green;left:0;top:" + (intLineTop - 8) + ";' coordsize='21600,21600'><v:textbox style='color:" + yDescriptionColor + ";font-size:5pt;font-family:arial;border:0px solid red;margin-top:0; margin-left:0;'>" + Math.round(i*vYValueScale*100)/100 + "</v:textbox></v:rect>";

	}//End of for
	//debugger;
	if(vMaxY!=0)