Xml document conversion tool, with a chart example (hta) _ javascript skills

A small application of the xml document Conversion Program. several lines of code are used to generate a pie chart. Source code packaging is provided. Source Document, pie chart data

The Code is as follows:

Proportion of each indicator
Person

Indicator 1
50
1


Metric two hundred and fifty-two
50
2


Indicator 3
50
3


Indicator 4
50
4


Metric 5
50
5


Indicator 6
10
6


Metric 7
50
7


Metric 8
50
8

Template document

The Code is as follows:

<BR>$System.Event.EventManager.attachEvent <BR>( <BR>$$("#ctrlid#") , "AfterRender", <BR>function(sender) <BR>{ <BR>var cMenu = new $System.UI.ContextMenu($$("#ctrlid#").domid); <BR>//alert(2); <BR>$$("#ctrlid#").addChildNode(cMenu.guid , true); <BR>$$("#ctrlid#").$$secret.codebehind.cMenuGUID = cMenu.guid; <BR>var srcDoc = new $System.XML.XMLUtil.XDOC("root"); <BR>var tplDoc = $System.XML.XMLUtil.loadXMLFile("res\\app\\module\\style\\contextmenu.tpl.xml"); <BR>cMenu.hide(); <BR>cMenu.render(srcDoc , tplDoc); <BR>} <BR>) <BR>$$("#ctrlid#").$$secret.codebehind.showItemDetail = function(itemName , itemValue , itemPercent) <BR>{ <BR>//alert(); <BR>var cMenu = $$($$(leftFrameGUID).$$secret.codebehind.cMenuGUID); <BR>$(cMenu.guid + "_detail").innerHTML = $System.String.StringUtil.decodeURIComponent(detail); <BR>//alert($(cMenu.guid + "_detail").innerHTML); <BR>cMenu.show(window.event.x , window.event.y); <BR>} <BR>$$("#ctrlid#").$$secret.codebehind.sectorOnMouseOver = function(domid , startAngle , offsetAngle , angle , radius) <BR>{ <BR>//$(domid).path = "m0,0l0,0xe"; <BR>window.setTimeout("$('" + domid + "').path = 'm0,0ae0,0,1000,1000," + startAngle +"," + offsetAngle + "xe'" , 10 , "javascript"); <BR>} <BR>$$("#ctrlid#").$$secret.codebehind.sectorOnMouseOut = function(domid , startAngle , offsetAngle , angle , radius) <BR>{ <BR>//$(domid).path = "m0,0l0,0xe"; <BR>window.setTimeout("$('" + domid + "').path = 'm0,0ae0,0,850,850," + startAngle +"," + offsetAngle + "xe'" , 10 , "javascript"); <BR>} <BR>// <BR>//图表高、宽 <BR>var pContainer = $$("#ctrlid#").getDomObject(); <BR>var w = pContainer.style.pixelWidth; <BR>var h = pContainer.style.pixelHeight; <BR>//alert(h); <BR>if(h < w){ <BR>h = h < (w * 5 / 6) ? h : Math.floor(w * 5 / 6); <BR>} <BR>else{ <BR>h = Math.floor(w * 5 / 6); <BR>} <BR>var hv = Math.min(w , h); <BR>var rad = Math.floor(2 * hv / 5); <BR>//alert(rad); <BR>var radius = 1000; <BR>$$("#ctrlid#").$$secret.codebehind.radius = radius; <BR>$$("#ctrlid#").$$secret.codebehind.rad = rad; <BR>//扇区数 <BR>var itemNodeList = $$("#sdocguid#").getElementsByTagName("item"); <BR>$$("#ctrlid#").$$secret.codebehind.sectorCount = itemNodeList.length; <BR>var nameLengthArray = []; <BR>var maxItemNameLength , cNameLength; <BR>if($$("#ctrlid#").$$secret.codebehind.sectorCount != 0){ <BR>for(iteri = 0 ; iteri < $$("#ctrlid#").$$secret.codebehind.sectorCount; iteri ++){ <BR>cNameLength = $System.String.StringUtil.getLengthInCn(itemNodeList.item(iteri).getElementsByTagName("name").item(0).text); <BR>nameLengthArray.push(cNameLength); <BR>} <BR>maxItemNameLength = nameLengthArray.sort <BR>( <BR>function(a , b){ <BR>if(a == b){ <BR>return 0; <BR>} <BR>if(a > b){ <BR>return 1; <BR>} <BR>return -1; <BR>} <BR>)[nameLengthArray.length - 1]; <BR>} <BR>$$("#ctrlid#").$$secret.codebehind.maxItemNameLength = maxItemNameLength; <BR>//图表背景尺寸 <BR>var bgLeft = Math.floor((w - 2 * rad - Math.ceil(rad / 9) - Math.ceil(rad / 10) - (maxItemNameLength / 10) * rad) / 2); <BR>//alert(bgLeft); <BR>var bgTop = Math.floor(rad / 7); <BR>//alert(bgTop); <BR>var bgWidth = 2 * rad; <BR>var bgHeight = 2 * rad; <BR>$$("#ctrlid#").$$secret.codebehind.bg = {bgLeft : bgLeft , bgTop : bgTop , bgWidth : bgWidth , bgHeight : bgHeight}; <BR>//当前扇区起始角度 <BR>$$("#ctrlid#").$$secret.codebehind.cStartAngle = 0; <BR>$$("#ctrlid#").$$secret.codebehind.angleOffset = 0; <BR>$$("#ctrlid#").$$secret.codebehind.cSN = null; <BR>$$("#ctrlid#").$$secret.codebehind.cIndex = 1000; <BR>var strStyle; <BR>strStyle = "border:1px solid red;position:relative;left:0px;top:" + Math.floor((pContainer.style.pixelHeight - h) / 2) + "px;width:" + w + "px;height:" + h + "px;overflow:visible;"; <BR>//alert(strStyle); <BR>




















<BR>var sn; <BR>if($$("#ctrlid#").$$secret.codebehind.cSN == null){ <BR>$$("#ctrlid#").$$secret.codebehind.cSN = 0; <BR>} <BR>else{ <BR>$$("#ctrlid#").$$secret.codebehind.cSN++; <BR>} <BR>sn = $$("#ctrlid#").$$secret.codebehind.cSN; <BR>var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount; <BR>//compute color. <BR>var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 1 , 0.7); <BR>sColor = "rgb(" + ar[sn].r + " " + ar[sn].g + " " + ar[sn].b + ")"; <BR>









<BR>var sn; <BR>sn = $$("#ctrlid#").$$secret.codebehind.cSN; <BR>var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount; <BR>//compute color. <BR>var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 0.5 , 1); <BR>sColor = "rgb(" + ar[sn].r + " " + ar[sn].g + " " + ar[sn].b + ")"; <BR>











<BR>var sn = $$("#ctrlid#").$$secret.codebehind.cSN; <BR>var cldNodeList = $System.XML.XMLUtil.XElement.getElementChildsByTagName($$("#sdocguid#").documentElement , "item"); <BR>var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount; <BR>var totalValue = 0; <BR>var valueArray = []; <BR>var cValue; <BR>//compute startangle and endangle. degree * (2^16) <BR>for(var ai = 0 ; ai < totalCount ; ai ++){ <BR>cValue = parseFloat($System.XML.XMLUtil.XElement.getFirstElementChildByTagName(cldNodeList[ai] , "value").firstChild.nodeValue); <BR>valueArray.push(cValue); <BR>totalValue += cValue; <BR>} <BR>var startAngle = 0; <BR>var angleOffset = 0; <BR>for(var ai = 0 ; ai < totalCount - 1 ; ai ++){ <BR>if(sn != ai){ <BR>startAngle += (ai % 2 == 0) ? Math.floor(valueArray[ai] / totalValue * 360 * 65536) : Math.ceil(valueArray[ai] / totalValue * 360 * 65536); <BR>} <BR>else{ <BR>angleOffset = ((ai % 2 == 0) ? Math.floor(valueArray[ai] / totalValue * 360 * 65536) : Math.ceil(valueArray[ai] / totalValue * 360 * 65536)); <BR>break; <BR>} <BR>} <BR>if(sn == (totalCount - 1)){ <BR>angleOffset = 360 * 65536 - startAngle; <BR>} <BR>$$("#ctrlid#").$$secret.codebehind.cStartAngle = startAngle; <BR>$$("#ctrlid#").$$secret.codebehind.angleOffset = angleOffset; <BR>//construct the path attribute value. <BR>var sPath; <BR>sPath = "m0,0ae0,0,850,850," + startAngle +"," + angleOffset + "xe"; <BR>














<BR>var str; <BR>str = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 8); <BR>











<BR>var sn; <BR>sn = $$("#ctrlid#").$$secret.codebehind.cSN; <BR>var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount; <BR>//compute color. <BR>var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 1 , 0.7); <BR>sColor = "rgb(" + ar[sn].r + " " + ar[sn].g + " " + ar[sn].b + ")"; <BR>












<BR>var skewangle; <BR>skewangle = 90; <BR>











<BR>var strStyle; <BR>strStyle = "border:0px solid red;position:absolute;left:" + $$("#ctrlid#").$$secret.codebehind.bg.bgLeft + "px;top:" + $$("#ctrlid#").$$secret.codebehind.bg.bgTop + "px;width:" + $$("#ctrlid#").$$secret.codebehind.bg.bgWidth + "px;height:" + $$("#ctrlid#").$$secret.codebehind.bg.bgHeight + "px;"; <BR>//alert(strStyle); <BR>var startAngle = $$("#ctrlid#").$$secret.codebehind.cStartAngle / 65536; <BR>if(startAngle == 0){ <BR>strStyle += "z-index:" + $$("#ctrlid#").$$secret.codebehind.cIndex; <BR>} <BR>else if(startAngle < 90 && startAngle > 0){ <BR>strStyle += "z-index:" + (--$$("#ctrlid#").$$secret.codebehind.cIndex); <BR>} <BR>else if(startAngle >=90 && startAngle < 270){ <BR>$$("#ctrlid#").$$secret.codebehind.cIndex += 2; <BR>strStyle += "z-index:" + $$("#ctrlid#").$$secret.codebehind.cIndex; <BR>} <BR>else{ <BR>strStyle += "z-index:" + (--$$("#ctrlid#").$$secret.codebehind.cIndex); <BR>} <BR>










<BR>var domid = $System.genGUID(); <BR>domid; <BR>










<BR>var startAngle = $$("#ctrlid#").$$secret.codebehind.cStartAngle; <BR>var offsetAngle = $$("#ctrlid#").$$secret.codebehind.angleOffset; <BR>var angleLine = ($$("#ctrlid#").$$secret.codebehind.cStartAngle + $$("#ctrlid#").$$secret.codebehind.angleOffset / 2) / 65536; <BR>var str; <BR>str = "$$('#ctrlid#').$$secret.codebehind.sectorOnMouseOver('#titleid#' , " + startAngle + " , " + offsetAngle + " , " + angleLine + " , " + $$("#ctrlid#").$$secret.codebehind.rad + ")"; <BR>//alert(str); <BR>










<BR>var angleLine = ($$("#ctrlid#").$$secret.codebehind.cStartAngle + $$("#ctrlid#").$$secret.codebehind.angleOffset / 2) / 65536; <BR>var str; <BR>str = "$$('#ctrlid#').$$secret.codebehind.sectorOnMouseOut('#titleid#' , " + startAngle + " , " + offsetAngle + " , " + angleLine + " , " + $$("#ctrlid#").$$secret.codebehind.rad + ")"; <BR>














<BR>var pContainer = $$("#ctrlid#").getDomObject(); <BR>var strStyle; <BR>var h = pContainer.style.pixelHeight - Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 4) - Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 8); <BR>var l = $$("#ctrlid#").$$secret.codebehind.bg.bgLeft + $$("#ctrlid#").$$secret.codebehind.bg.bgWidth + Math.ceil($$("#ctrlid#").$$secret.codebehind.rad / 10); <BR>var w = Math.ceil($$("#ctrlid#").$$secret.codebehind.maxItemNameLength / 8) * $$("#ctrlid#").$$secret.codebehind.rad + Math.ceil($$("#ctrlid#").$$secret.codebehind.rad / 12); <BR>strStyle = "border:solid 0px #FF0000;position:absolute;left:" + l + "px;top:" + Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 4) + "px;width:" + w + "px;height:" + h + "px;"; <BR>











<BR>var pContainer = $$("#ctrlid#").getDomObject(); <BR>var h; <BR>h = pContainer.style.pixelHeight - Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 4) - Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 8); <BR>




























<BR>var strStyle; <BR>var hw = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 10); <BR>strStyle = "margin:0px;position:relative;top:0px;left:0px;border:0px solid #FF0000;width:" + hw + "px;height:" + hw + "px;padding:0px;"; <BR>











<BR>var strStyle; <BR>var hw = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 10); <BR>strStyle = "margin:0px;position:absolute;top:0px;left:0px;width:" + hw + "px;height:" + hw + "px;"; <BR>


















<BR>if($$("#ctrlid#").$$secret.codebehind.sampleI == null){ <BR>$$("#ctrlid#").$$secret.codebehind.sampleI = 0; <BR>} <BR>var sColor; <BR>var sn = $$("#ctrlid#").$$secret.codebehind.sampleI; <BR>var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount; <BR>//compute color. <BR>var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 1 , 0.7); <BR>//$$("#ctrlid#").$$secret.codebehind.cColumnFillColor = ar[sn].r + "," +ar[sn].g + "," +ar[sn].b; <BR>sColor = "rgb(" + ar[sn].r + " " + ar[sn].g + " " + ar[sn].b + ")"; <BR>










<BR>var sColor; <BR>var sn = $$("#ctrlid#").$$secret.codebehind.sampleI; <BR>var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount; <BR>//compute color. <BR>var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 0.5 , 1); <BR>//$$("#ctrlid#").$$secret.codebehind.cColumnFillColor = ar[sn].r + "," +ar[sn].g + "," +ar[sn].b; <BR>$$("#ctrlid#").$$secret.codebehind.sampleI++; <BR>sColor = "rgb(" + ar[sn].r + " " + ar[sn].g + " " + ar[sn].b + ")"; <BR>
















<BR>var ww; <BR>ww = Math.max(Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 30) , 5); <BR>










<BR>var strStyle; <BR>var hw = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 8); <BR>strStyle = "margin:0px;padding:0px;height:" + hw + "px;line-height:1px;"; <BR>

















<BR>var fs = Math.ceil($$("#ctrlid#").$$secret.codebehind.rad / 15) > 9 ? Math.ceil($$("#ctrlid#").$$secret.codebehind.rad / 15) : 9; <BR>strStyle = "padding:0px;margin:0px;height:1px;line-height:" + fs + "px;font-size:" + fs +"px;font-weight:bold;font-family: 'Microsoft YaHei',SimHei,Helvetica,STHeiti,Georgia, 'Times New Roman', Times, serif;"; <BR>





















<BR>var w = $$("#ctrlid#").getDomStyle("pixelWidth"); <BR>var h = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 6); <BR>var fs = h > 14 ? h : 14; <BR>strStyle = "padding-top:" + Math.floor(fs / 4) + "px;font-size:" + fs + "px;text-align:center;border:solid 0px #FF0000;position:absolute;left:0px;top:0px;width:" + w + "px;height:" + (fs + Math.floor(fs / 4)) + "px;line-height" + (fs + Math.floor(fs / 4)) + "px;font-weight:bold;font-family: 'Microsoft YaHei',SimHei,Helvetica,STHeiti,Georgia, 'Times New Roman', Times, serif;"; <BR>

Conversion code

The Code is as follows:

Var ctrl1 = new $ System. UI. Control ("p005 ");
Var srcdoc = $ System. XML. XMLUtil. loadXMLFile ("ria09 \ style \ xmls \ graph_src.xml ");
Var tpldoc = $ System. XML. XMLUtil. loadXMLFile ("ria09 \ style \ xmls \ graph_3dpie_tpl.xml ");
Ctrl1.renderE (srcdoc, tpldoc );

Conversion Result

Code download