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

Source: Internet
Author: User
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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.