각 지표의 비율 ;
<항목>
<이름>표시자 1
<설명>1 /item>
-
지시자 252
/description>
-
표시자 3
3
지시자 4
설명
표시자 5 5
항목>
6
-
50
7
-
표시자 8
50
;
템플릿 문서
코드 복사
다음:
<속성 이름="style" 표현식="true">
<표현>
<성명>
$System.Event.EventManager.attachEvent
(
$$("#ctrlid#") , "AfterRender",
함수(발신자)
{
var cMenu = new $System.UI.ContextMenu($$("#ctrlid#").domid)
//alert(2)
$$("#ctrlid#" ).addChildNode(cMenu.guid , true);
$$("#ctrlid#").$$secret.codebehind.cMenuGUID = cMenu.guid
var srcDoc = new $System.XML.XMLUtil. XDOC("루트");
var tplDoc = $System.XML.XMLUtil.loadXMLFile("res\app\module\style\contextmenu.tpl.xml")
cMenu.hide(); >cMenu.render(srcDoc , tplDoc);
}
)
$$("#ctrlid#").$$secret.codebehind.showItemDetail = function(itemName , itemValue , itemPercent)
{
//경고();
var cMenu = $$($$(leftFrameGUID).$$secret.codebehind.cMenuGUID);
$(cMenu.guid "_detail").innerHTML = $System.String.StringUtil.decodeURIComponent(detail);
//alert($(cMenu.guid "_detail").innerHTML);
cMenu.show(window.event.x, window.event.y);
}
$$("#ctrlid#").$$secret.codebehind.sectorOnMouseOver = function(domid , startAngle , offsetAngle , angle , radius)
{
//$(domid) .path = "m0,0l0,0xe";
window.setTimeout("$('" domid "').path = 'm0,0ae0,0,1000,1000," startAngle "," offsetAngle "xe'" , 10 , "javascript");
}
$$("#ctrlid#").$$secret.codebehind.sectorOnMouseOut = function(domid , startAngle , offsetAngle , angle , radius)
{
//$(domid) .path = "m0,0l0,0xe";
window.setTimeout("$('" domid "').path = 'm0,0ae0,0,850,850," startAngle "," offsetAngle "xe'" , 10 , "javascript");
}
//
//图表高、宽
var pContainer = $$("#ctrlid#").getDomObject();
var w = pContainer.style.pixelWidth;
var h = pContainer.style.pixelHeight;
//경고(h);
if(h < w){
h = h < (w * 5 / 6) ? h : Math.floor(w * 5 / 6);
}
else{
h = Math.floor(w * 5 / 6);
}
var hv = Math.min(w , h);
var rad = Math.floor(2 * hv / 5);
//경고(rad);
var 반경 = 1000;
$$("#ctrlid#").$$secret.codebehind.radius = 반경;
$$("#ctrlid#").$$secret.codebehind.rad = rad;
//扇区数
var itemNodeList = $$("#sdocguid#").getElementsByTagName("item");
$$("#ctrlid#").$$secret.codebehind.sectorCount = itemNodeList.length;
var nameLengthArray = [];
var maxItemNameLength , cNameLength;
if($$("#ctrlid#").$$secret.codebehind.sectorCount != 0){
for(iteri = 0 ; iteri < $$("#ctrlid#").$ $secret.codebehind.sectorCount; iteri ){
cNameLength = $System.String.StringUtil.getLengthInCn(itemNodeList.item(iteri).getElementsByTagName("name").item(0).text);
nameLengthArray.push(cNameLength);
}
maxItemNameLength = nameLengthArray.sort
(
function(a , b){
if(a == b){
return 0;
}
if(a > b){
return 1;
}
return -1
}
)[nameLengthArray.length - 1];
}
$$("#ctrlid#").$$secret.codebehind.maxItemNameLength = maxItemNameLength;
//图表背景尺寸
var bgLeft = Math.floor((w - 2 * rad - Math.ceil(rad / 9) - Math.ceil(rad / 10) - (maxItemNameLength / 10) * rad ) / 2);
//alert(bgLeft);
var bgTop = Math.floor(rad / 7);
//alert(bgTop);
var bgWidth = 2 * rad;
var bgHeight = 2 * rad;
$$("#ctrlid#").$$secret.codebehind.bg = {bgLeft : bgLeft , bgTop : bgTop , bgWidth : bgWidth , bgHeight : bgHeight};
//当前扇区起始角degree
$$("#ctrlid#").$$secret.codebehind.cStartAngle = 0;
$$("#ctrlid#").$$secret.codebehind.angleOffset = 0;
$$("#ctrlid#").$$secret.codebehind.cSN = null;
$$("#ctrlid#").$$secret.codebehind.cIndex = 1000;
var strStyle;
strStyle = "테두리:1px 단색 빨간색;위치:상대적;왼쪽:0px;top:" Math.floor((pContainer.style.pixelHeight - h) / 2) "px;너비:" w "px;높이 :" h "px;overflow:visible;";
//alert(strStyle);
]]>
<요소 이름="v:모양">
<속성 이름="coordorigin" value="-1000,-1000" />
<속성 이름="coordsize" value="2000,2000" />
<속성 이름="스트로크" 값="false" />
<속성 이름="fill" value="true" />
<요소 이름="v:채우기">
<속성 이름="회전" 값="true" />
<속성 이름="angle" value="180" />
<속성 이름="focus" value="100%" />
<속성 이름="유형" 값="그라디언트" />
<속성 이름="color" 표현식="true">
<표현>
<성명>
var sn;
if($$("#ctrlid#").$$secret.codebehind.cSN == null){
$$("#ctrlid#").$$secret.codebehind.cSN = 0;
}
else{
$$("#ctrlid#").$$secret.codebehind.cSN ;
}
sn = $$("#ctrlid#").$$secret.codebehind.cSN;
var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount;
//색상을 계산합니다.
var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 1 , 0.7);
sColor = "rgb(" ar[sn].r " " ar[sn].g " " ar[sn].b ")";
]]>
<속성 이름="color2" 표현식="true">
<표현>
<성명>
var sn;
sn = $$("#ctrlid#").$$secret.codebehind.cSN;
var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount;
//색상을 계산합니다.
var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 0.5 , 1);
sColor = "rgb(" ar[sn].r " " ar[sn].g " " ar[sn].b ")";
]]>
<속성 이름="경로" 표현="true">
<표현>
<성명>
var sn = $$("#ctrlid#").$$secret.codebehind.cSN;
var cldNodeList = $System.XML.XMLUtil.XElement.getElementChildsByTagName($$("#sdocguid#").documentElement , "item");
var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount;
var totalValue = 0;
var valueArray = [];
var cValue;
//startangle과 endangle을 계산합니다. 정도 * (2^16)
for(var ai = 0 ; ai < totalCount ; ai ){
cValue =parseFloat($System.XML.XMLUtil.XElement.getFirstElementChildByTagName(cldNodeList[ai] , "값 ").firstChild.nodeValue);
valueArray.push(cValue);
totalValue = cValue;
}
var startAngle = 0;
var angleOffset = 0;
for(var ai = 0 ; ai < totalCount - 1 ; ai ){
if(sn != ai){
startAngle = (ai % 2 == 0) ? Math.floor(valueArray[ai] / totalValue * 360 * 65536) : Math.ceil(valueArray[ai] / totalValue * 360 * 65536);
}
else{
angleOffset = ((ai % 2 == 0) ? Math.floor(valueArray[ai] / totalValue * 360 * 65536) : Math.ceil(valueArray[ai] / totalValue * 360 * 65536));
휴식;
}
}
if(sn == (totalCount - 1)){
angleOffset = 360 * 65536 - startAngle;
}
$$("#ctrlid#").$$secret.codebehind.cStartAngle = startAngle;
$$("#ctrlid#").$$secret.codebehind.angleOffset = angleOffset;
//경로 속성 값을 구성합니다.
var sPath;
sPath = "m0,0ae0,0,850,850," startAngle "," angleOffset "xe";
]]>
<요소 이름="v:압출">
<속성 이름="on" value="t" />
<속성 이름="유형" 값="병렬" />
<속성 이름="back뎁스" 표현식="true">
<표현>
<성명>
var str;
str = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 8);
]]>
<속성 이름="유형" 값="병렬" />
<속성 이름="color" 표현식="true">
<표현>
<성명>
var sn;
sn = $$("#ctrlid#").$$secret.codebehind.cSN;
var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount;
//색상을 계산합니다.
var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 1 , 0.7);
sColor = "rgb(" ar[sn].r " " ar[sn].g " " ar[sn].b ")";
]]>
<속성 이름="금속" 값="t" />
<속성 이름="rotationangle" value="20,0" />
<속성 이름="skewangle" 표현식="true">
<표현>
<성명>
var Skewangle;
스큐앵글 = 90;
]]>
<속성 이름="style" 표현식="true">
<표현>
<성명>
var strStyle;
strStyle = "테두리:0px 단색 빨간색; 위치:절대;왼쪽:" $$("#ctrlid#").$$secret.codebehind.bg.bgLeft "px;top:" $$("#ctrlid #").$$secret.codebehind.bg.bgTop "px;너비:" $$("#ctrlid#").$$secret.codebehind.bg.bgWidth "px;높이:" $$("#ctrlid #").$$secret.codebehind.bg.bgHeight "px;";
//alert(strStyle);
var startAngle = $$("#ctrlid#").$$secret.codebehind.cStartAngle / 65536;
if(startAngle == 0){
strStyle = "z-index:" $$("#ctrlid#").$$secret.codebehind.cIndex;
}
else if(startAngle < 90 && startAngle > 0){
strStyle = "z-index:" (--$$("#ctrlid#").$$secret.codebehind .c인덱스);
}
else if(startAngle >=90 && startAngle < 270){
$$("#ctrlid#").$$secret.codebehind.cIndex = 2;
strStyle = "z-index:" $$("#ctrlid#").$$secret.codebehind.cIndex;
}
else{
strStyle = "z-index:" (--$$("#ctrlid#").$$secret.codebehind.cIndex);
}
]]>
var domid = $System.genGUID();
domid;
]]>
var startAngle = $$("#ctrlid#").$$secret.codebehind.cStartAngle;
var offsetAngle = $$("#ctrlid#").$$secret.codebehind.angleOffset;
var angleLine = ($$("#ctrlid#").$$secret.codebehind.cStartAngle + $$("#ctrlid#").$$secret.codebehind.angleOffset / 2) / 65536;
var str;
str = "$$('#ctrlid#').$$secret.codebehind.sectorOnMouseOver('#titleid#' , " + startAngle + " , " + offsetAngle + " , " + angleLine + " , " + $$("#ctrlid#").$$secret.codebehind.rad + ")";
//alert(str);
]]>
var angleLine = ($$("#ctrlid#").$$secret.codebehind.cStartAngle + $$("#ctrlid#").$$secret.codebehind.angleOffset / 2) / 65536;
var str;
str = "$$('#ctrlid#').$$secret.codebehind.sectorOnMouseOut('#titleid#' , " + startAngle + " , " + offsetAngle + " , " + angleLine + " , " + $$("#ctrlid#").$$secret.codebehind.rad + ")";
]]>
var pContainer = $$("#ctrlid#").getDomObject();
var strStyle;
var h = pContainer.style.pixelHeight - Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 4) - Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 8);
var l = $$("#ctrlid#").$$secret.codebehind.bg.bgLeft + $$("#ctrlid#").$$secret.codebehind.bg.bgWidth + Math.ceil($$("#ctrlid#").$$secret.codebehind.rad / 10);
var w = Math.ceil($$("#ctrlid#").$$secret.codebehind.maxItemNameLength / 8) * $$("#ctrlid#").$$secret.codebehind.rad + Math.ceil($$("#ctrlid#").$$secret.codebehind.rad / 12);
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;";
]]>
var pContainer = $$("#ctrlid#").getDomObject();
var h;
h = pContainer.style.pixelHeight - Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 4) - Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 8);
]]>
<속성 이름="cellspacing" value="0" />
<요소 이름="tr">
<요소 이름="td">
<속성 이름="align" value="center" />
<속성 이름="valign" value="middle" />
<속성 name="height" value="1" />
<요소 이름="div">
<속성 이름="style" 표현식="true">
<표현>
<성명>
var strStyle;
var hw = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 10);
strStyle = "여백:0px;위치:상대;상단:0px;왼쪽:0px;테두리:0px 솔리드 #FF0000;너비:" hw "px;높이:" hw "px;패딩:0px;";
]]>
<요소 이름="v:모양">
<속성 이름="style" 표현식="true">
<표현>
<성명>
var strStyle;
var hw = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 10);
strStyle = "여백:0px;위치:절대;위쪽:0px;왼쪽:0px;너비:" hw "px;높이:" hw "px;";
]]>
<속성 이름="경로" 값="m 0,0 l 0,100 100,100 100,0 x e" />
<속성 이름="coordorigin" value="0,0" />
<속성 이름="coordsize" value="100,100" />
<요소 이름="v:채우기">
<속성 이름="회전" 값="true" />
<속성 이름="angle" value="180" />
<속성 이름="focus" value="100%" />
<속성 이름="유형" 값="그라디언트" />
<속성 이름="color" 표현식="true">
<표현>
<성명>
if($$("#ctrlid#").$$secret.codebehind.sampleI == null){
$$("#ctrlid#").$ $secret.codebehind.sampleI = 0;
}
var sColor;
var sn = $$("#ctrlid#").$$secret.codebehind.sampleI;
var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount;
//compute color.
var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 1 , 0.7);
//$$("#ctrlid#").$$secret.codebehind.cColumnFillColor = ar[sn].r + "," +ar[sn].g + "," +ar[sn].b;
sColor = "rgb(" + ar[sn].r + " " + ar[sn].g + " " + ar[sn].b + ")";
]]>
var sColor;
var sn = $$("#ctrlid#").$$secret.codebehind.sampleI;
var totalCount = $$("#ctrlid#").$$secret.codebehind.sectorCount;
//compute color.
var ar = $System.UI.ColorUtil.genColorArrayOnItemNum(totalCount , 0.5 , 1);
//$$("#ctrlid#").$$secret.codebehind.cColumnFillColor = ar[sn].r + "," +ar[sn].g + "," +ar[sn].b;
$$("#ctrlid#").$$secret.codebehind.sampleI++;
sColor = "rgb(" + ar[sn].r + " " + ar[sn].g + " " + ar[sn].b + ")";
]]>
var ww;
ww = Math.max(Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 30) , 5);
]]>
var strStyle;
var hw = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 8);
strStyle = "margin:0px;padding:0px;height:" + hw + "px;line-height:1px;";
]]>
var fs = Math.ceil($$("#ctrlid#").$$secret.codebehind.rad / 15) > 9 ? Math.ceil($$("#ctrlid#").$$secret.codebehind.rad / 15) : 9;
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;";
]]>
var w = $$("#ctrlid#").getDomStyle("pixelWidth");
var h = Math.floor($$("#ctrlid#").$$secret.codebehind.rad / 6);
var fs = h > 14 ? h : 14;
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;너비:" w "px;높이:" (fs Math.floor(fs / 4)) "px;line-height" (fs Math.floor(fs / 4)) "px;font-weight:bold ;글꼴 계열: 'Microsoft YaHei',SimHei,Helvetica,STHeiti,Georgia, 'Times New Roman', Times, serif;";
]]>
< /expression>
>코드 변환
코드 복사
코드는 다음과 같습니다. var ctrl1 = new $System .UI.Control("div005");
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)
변환 결과
코드 다운로드
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
