<div class="eArea xe_content xe_dr_hx"><h3 id="h1250736862209">에디터에 추가하기 insertPChart() </h3></div><div class="eArea xe_content xe_dr_txt"><p>에디터 윈도우인 opener의 editorReplaceHTML를 이용하여 선택된 부분을 _createImg()로 만든 그래프인 <img /> tag 로 치환합니다.<br> 차후 수정을 위해 <img />의 <span style="font-weight: bold;">editor_component attribute</span>에는 pchart를 <span style="font-weight: bold;">title attribute</span>에 항목1:값1[ , 항목2:값2 ..] 로 설정합니다.<br></p></div><div class="eArea xe_content xe_dr_txt"><p>// 에디터에 추가<br>function <span style="font-weight: bold;">insertPChart</span>() {<br> // 창을 띄운 윈도우가 없을 경우 종료<br> if(typeof(opener)=='undefined') return;<br></p><p> var str = _createImg(); <br><br> opener.editorFocus(opener.editorPrevSrl);<br> var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl)<br> opener.editorReplaceHTML(iframe_obj, str);<br> window.close();<br>}</p><p><br></p><p>// api를 이용하여 이미지 경로를 만들고 <img /> tag를 생성<br>function _createImg(){<br> // api 기본 url를 가져옴<br> var url = jQuery('#api_url').val();<br> var title=[],value=[],h,w,t=[],v=[],info='',src='';<br> <br> h = jQuery('#chart_height').val();<br> w = jQuery('#chart_width').val();<br><br> jQuery('input[id^=title]').each(function(){<br> title.push(jQuery(this).val()); <br> }); <br> jQuery('input[id^=value]').each(function(){<br> value.push(jQuery(this).val()); <br> }); <br><br> for(var i=0,c=title.length;i<c;i++){<br> if(title[i].length>0 && value[i].length>0){<br> t.push(title[i]);<br> v.push(value[i]);<br> info += title[i] + ':' +value[i] + ',';<br> } <br> } <br><br> // 넓이와 높이 각 항목의 타이틀 <br> src = url.setQuery('cht','p3').setQuery('chd','t:'+v.join(','+
'+
')).setQuery('chs',w+'x'+h).setQuery('chl',t.join('|')).setQuery('dummy','.png');<br> return '<img src="'+url+'" width="'+w+'" height="'+h+'" editor_component="pchart" alt="pie chart" title="'+info+'" />';<br>}<br><br></p></div><div class="eArea xe_content xe_dr_hx"><h3 id="h1250736884090">그래프를 수정하기 </h3></div><div class="eArea xe_content xe_dr_txt"><p>수정시에는 사용자가 에디터에서 만들어진 파이 차트를 더블클릭 합니다.</p><p>더블클릭 이벤트는 XE_ROOT/modules/editor/tpl/js/editor_common.js 의 editorEventCheck()가 받아 editor_component attribute값으로 해당 컴포넌트를 연결하여 pchart::getPopupContent()가 호출되어 설정창이 뜹니다.</p><p>이때 opener인 에디터 창에서 변수 editorPrevNode 값에 선택된 node가 들어가게 되어 opener.editorPrevNode를 이용하여 차트생성시 title에 셋팅해둔 값을 읽어와 jQuery ready 이벤트시(창이 로드될 때) 설정 팝업창 input에 값을 넣어 주게 됩니다.<br></p></div><div class="eArea xe_content xe_dr_txt"><p>// 수정시<br>jQuery(function(){<br> // 선택된 노드<br> var node = jQuery(opener.editorPrevNode).length;<br> if(node.length){<br><br> // title attribute 파싱<br> var i=0;<br> node.attr('title').replace(/([^,:]+):([0-9]+)/g,function(m1,m2,m3){<br> jQuery('#title'+i).val(m2);<br> jQuery('#value'+i).val(m3);<br> i++;<br> });<br><br> // 넓이와 높이<br> jQuery('#chart_height').val(node.attr('height'));<br> jQuery('#chart_width').val(node.attr('width'));<br> }<br>});<br><br></p></div>