리아모어소프트 데스크탑용데모 : 모바일용데모 : 2/170

Transcription

1 rmate Chart for HTML5 사용설명서 Version 5.0 정품을구입하신고객에게는기술상담및지원을제공합니다서울시영등포구영신로 220, 611 호 ( 영등포동 8 가, KnK 디지털타워 ) (Tel : , riamore@riamore.net)

2 리아모어소프트 데스크탑용데모 : 모바일용데모 : 2/170

3 목차 1. 개요 rmate Chart for HTML5 의주요특징 시스템요구사항 차트시스템구성환경설명 제품의구성요소 차트리스트 기본적인차트의생성 rmate Chart for HTML5 라이선스등록하기 기본적인차트생성하기 차트버전정보보기 차트데이터형식 XML 형식의데이터작성및차트에삽입하기 배열형식의데이터작성및차트에삽입하기 차트설정및연동방식 chartvars 설정하기 차트에접근가능한함수들 차트와레이아웃 레이아웃작성방법에대하여 레이아웃의 rmatechart 노드설정하기 레이아웃의 Options 노드설정하기 차트제목 (Caption), 부제목 (SubCaption) 넣기 차트범례 (Legend) 넣기 데이터에디터사용하기 레이아웃의 Style 노드 (CSS 적용 ) 설정하기 차트유형별레이아웃설정하기 차트의공통적인속성알아보기 Cartesian 차트의축에대하여 CategoryAxis 와 LinearAxis 예제 DateTimeAxis 와 LogAxis 예제 칼럼 2D 차트 칼럼 3D 차트 실린더 3D 차트 실린더 3D 칼럼차트 실린더 3D 바차트 바 2D 차트 /170

4 6.7. 바 3D 차트 파이, 도넛차트, 버블 3D 차트 영역 (Area) 차트 플롯차트 라인차트 점선 (Dashed-Line) 차트 콤비네이션차트 실시간차트 데이터개수를기준으로실시간차트표현 (CategoryAxis 활용 ) 정해진시간을기준으로실시간차트표현 (DateTimeAxis 활용 ) HttpServiceRepeater 로일반차트의데이터를실시간으로바꾸기 레이더 ( 방사형 ) 차트 목표대비실적차트 스크롤차트 브로큰축 (Broken Axis) 차트 히스토리차트 From-To 차트 매트릭스차트 이미지차트 윙차트 실시간-프리미엄차트 캔들스틱차트 게이지차트 Circular 게이지 Half-Circular 게이지 Cylinder 게이지 Linear 게이지 슬라이드차트기능사용하기 트리맵차트 워드클라우드 벡터차트 에러바차트 박스플롯차트 히스토그램차트 모션차트 고급사용자를위한 rmate Chart 레이아웃설정 차트에수치필드표시하기 /170

5 7.2. 차트시리즈아이템각각에컬러지정하기 축 (Axis) 에대한스타일적용하기 축스타일설명및예제 축의 Visible 속성사용하여축의유, 무나타내기 축의위치바꾸기 세로축 2 개 ( 듀얼축 ) 로각각의데이터표현하기 수직, 수평축의수치에 3 자리단위로컴마 (,) 찍기 수직, 수평축에통화단위넣기 수직, 수평축을 DateTimeAxis 정의한경우날짜포맷변환하기 축제목 ( 대표문자 ) 삽입하기 차트축을기준으로안쪽의배경꾸미기 차트안쪽배경에그리드라인삽입하기 차트안쪽배경에이미지삽입하기 차트생성시효과적용하기 마우스오버시데이터팁 ( 툴팁 ) 나타내기 칼럼차트스택형데이터간연결선잇기 차트아이템클릭시불려지는함수설정하기 사용자정의함수설정하기 데이터팁 ( 툴팁 ) 함수사용자정의 축라벨사용자정의 수치필드사용자정의 채우기색사용자정의 차트안범위지정및다수의선긋기 확대 / 축소와마우스이동에따른십자가표시하기 차트안에메모표시하기 라인차트에서수직선으로데이터출력하기 동적으로차트레이아웃또는데이터변경하기 하나의 html 문서안에여러개의차트를생성하기 실시간차트예제 주식모니터링차트 차트의이미지데이터가져오기 차트의이미지서버로전송 모바일에서의이미지데이터가져오기 장애인을위한기능 시각장애인을위한대체텍스트 색맹이나색약이신분을위한패턴지원 테마 ( Theme ) rmatecharth5 에서제공하는테마등록하기 제공되는테마적용하기 /170

6 9.3. 기본테마로돌아가기 테마삭제하기 rmatechart for Flash 와 rmatechart for HTML5 의차이점설명 지원하지않는기능 플래쉬차트의리사이즈와 HTML5 차트의리사이즈차이점 제품사용시발생할수있는문제해결정보 /170

7 1. 개요 1.1. rmate Chart for HTML5 의주요특징 rmate Chart for HTML5 는 ActiveX 기술을배제한순수자바스크립트와 HTML5 의 Canvas 를바탕으로개발된어플리케이션으로사용자에게데이터를시각적으로알기쉽게제시할수있는솔루션을제공합니다. 단순한 2 차원이아닌 3D 와그라데이션효과를넣은 2D 를통해수치데이터를표현하기때문에한차원업그레이드된 UI 를경험하실수있습니다. 의데모메뉴에서강력하고화려한 UI 의차트를직접체험하실수있습니다 시스템요구사항. 서버사이드 : 순수자바스크립트와 HTML5 기술을바탕으로두기때문에톰캣, IIS, 웹로직, 웹스피어, 제우스, LCDS 등등모든 WAS 서버에서작동하며, 서버스크립트언어에의존적이지 않습니다. 클라이언트사이드 : HTML5 의 Canvas 를지원하는브라우저가필요합니다. IE 파이어폭스사파리크롬아이폰안드로이드 단, 인터넷익스플로러 (IE) 는익스플로러캔버스 (explorercanvas) 라이브러리를활용하여 IE 7, 8 에서차트를구현할수있으나성능저하및제약사항이발생합니다. 또한브라우져의특성에 의거하여지원되는기능및표시가차이가날수있습니다 차트시스템구성환경설명. 차트데이터및 레이아웃작성 인터넷을통한데이터 및차트레이아웃전송 서버 클라이언트 7/170

8 < 그림 1 서버와클라이언트간의데이터흐름도 > rmate 차트를생성하기위해서는차트레이아웃과수치데이터가필요합니다. 차트레이아웃은차트유형의선택을시작으로차트컬러변경, 차트축조작등등세밀한부분을제어하는 XML 파일입니다. 이에대한자세한설명은 5. 차트와레이아웃. 을참고하십시오. 차트데이터는 XML 형식과배열객체를지원합니다. 사용자의환경과편의에따라데이터를작성하실수있습니다. 차트데이터작성에대한자세한설명은 3. 차트데이터형식 을참고하십시오 제품의구성요소 제공된 rmate Chart for HTML5 CD 의내용은아래와같습니다. 디렉토리구조는 rmatecharth5, LicenseKey, Docs, Samples 으로구성되어있으며각각디렉토리역할은 아래와같습니다. 가. rmatecharth5 제품의자바스크립트 (rmatecharth5.js 등 ) 및필요한이미지가위치하고있으며, 실제제품을실행하는데필요한최소한의파일이들어있습니다. 하위의 JS 디렉토리에는제품에서필요한자바스크립트가들어있으며, Assets 디렉토리에는차트에서사용하는이미지와그에따른 CSS 가들어있습니다. 적용시 rmatecharth5 디렉토리를전체로서버에올리고해당 url 을적용하시면작업이편리합니다. 나. LicenseKey rmate Chart 라이선스가있는폴더입니다. (rmatecharth5license.js) 다. Docs 설명서는일반사용설명서와레이아웃 API 두가지형태로제공됩니다. Docs->api 폴더에레이아웃작성을위한문서가있습니다. API 는 Docs->api->index.html 을실행하여볼수있습니다. 라. Samples 각종예제를볼수있도록작성된 html 과 xml 파일입니다 차트리스트 아래표는 rmatecharth5 의차트리스트를나타냅니다. 표현하고자하는차트및데이터유형에따라 레이아웃파일과 js 파일을선택하십시오. 제공된레이아웃파일은기본설정이며사용자의취향에맞게 변경하실수있습니다. 이에대한자세한사항은 차트와레이아웃. 을참고하십시오. 8/170

9 제공된차트 js 파일및레이아웃파일은구매자의라이선스에따라상이한부분이있을수있습 니다. 파일명 설명 rmatecharth5.js 컬럼, 바, 파이, 라인, 영역등의기본차트 rmateradarcharth5.js 레이더차트 rmatehistorycharth5.js 히스토리차트 rmaterealtimecharth5.js 실시간차트 rmatescrollcharth5.js 스크롤차트 rmatematrixcharth5.js 매트릭스차트 rmateimagecharth5.js 이미지차트 rmatecandlecharth5.js 캔들차트 rmatewingcharth5.js 윙차트 rmatebrokenchart.js 브로큰차트 rmaterealtimepremiumh5.js 실시간-프리미엄차트 rmategaugecharth5.js 게이지차트 rmatevectorcharth5.js 벡터차트 rmateerrorcharth5.js 에러바차트 rmatehistogramcharth5.js 히스토그램차트 rmatemotioncharth5.js 모션차트 rmateboxplotcharth5.js 박스플롯차트 rmatetreemapcharth5.js 트리맵차트 rmatewordcloudcharth5.js 워드클라우드차트 rmateintegrationh5.js 해당라이선스에서생성가능한모든차트내포 ( 통합버전 ) 9/170

10 2. 기본적인차트의생성 rmate Chart for HTML5 라이선스등록하기 정상적인차트를생성하기위해서는 rmate Chart for HTML5 라이선스를등록하셔야합니다. 제공된시디 의다음경로에있는파일이차트에삽입할라이선스입니다. /LicenseKey/rMateChartH5License.js 위자바스크립트파일을 <head> 태그안에삽입하시면됩니다. 다른작업을하실필요는없습니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <! rmatecharth5 라이선스등록완료모습 --> <script src="rmatecharth5license.js" type="text/javascript" language="javascript"></script> < 예제 1 rmate Chart 라이선스등록예제 > 2.2. 기본적인차트생성하기 제공된샘플을참고하여 3D 칼럼싱글데이터차트를생성하여보도록하겠습니다. 제공된제품에서아래의경로를따라각각의파일을복사하여작업폴더안에복사하십시오. ( 아래의예제는작업폴더안에아래의경로를그대로만들었다고가정한예제입니다.) 차트 JS 라이브러리 : rmatecharth5/js/rmatecharth5.js 라이선스파일 : LicenseKey/rMateChartH5License.js 샘플 HTML 파일 : Samples/Column_3D.html 차트 CSS 파일 : rmatecharth5/assets/css/rmatecharth5.css * 정상적인차트생성을위해라이선스파일은반드시포함시켜야합니다. 10/170

11 다음은 Column_3D.html 파일의내용입니다. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-script-type" content="text/javascript" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="x-ua-compatible" content="ie=edge" /> <link rel="stylesheet" type="text/css" href="./rmatecharth5sample.css" /> <!-- IE7, 8 에서차트생성하고자하는경우 --> <!--[if IE]><script language="javascript" type="text/javascript" src="../rmatecharth5/js/excanvas.js "></script><![endif]--> <!-- rmatecharth5 라이브러리라이선스키입니다. 반드시포함시키십시오. --> <script language="javascript" type="text/javascript" src="../licensekey/rmatecharth5license.js"></script> <!-- rmatecharth5 에서사용하는스타일 --> <link rel="stylesheet" type="text/css" href="../rmatecharth5/assets/css/rmatecharth5.css"/> <!-- 실제적인 rmatecharth5 라이브러리 --> <script language="javascript" type="text/javascript" src="../rmatecharth5/js/rmatecharth5.js"></script> <script type="text/javascript"> // 차트설정시작 // rmate 차트생성준비가완료된상태시호출할함수를지정합니다. <4.1 chartvars 설정하기 참고 > var chartvars = "rmateonloadcallfunction=chartreadyhandler"; // rmatechart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 차트의 id ( 임의로지정하십시오. ) // 2. 차트가위치할 div 의 id ( 즉, 차트의부모 div 의 id 입니다.) 11/170

12 // 3. 차트생성시필요한환경변수들의묶음인 chartvars // 4. 차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 차트의세로사이즈 ( 생략가능, 생략시 100%) rmatecharth5.create("chart1", "chartholder", chartvars, "100%", "100%"); // 차트의속성인 rmateonloadcallfunction 으로설정된함수. // rmate 차트준비가완료된경우이함수가호출됩니다. // 이함수를통해차트에레이아웃과데이터를삽입합니다. // 파라메터 : id - rmatecharth5.create() 사용시사용자가지정한 id 입니다. function chartreadyhandler(id) { document.getelementbyid(id).setlayout(layoutstr); document.getelementbyid(id).setdata(chartdata); } // 스트링형식으로레이아웃정의. <5. 차트와레이아웃. 참고 > var layoutstr = '<rmatechart backgroundcolor="0xffffff" cornerradius="12" borderstyle="solid">' +' <Options>' +' <Caption text="anual Report"/>' +' </Options>' +' <NumberFormatter id="numfmt" precision="0"/>' +' <Column3DChart showdatatips="true">' +' <horizontalaxis>' +' <CategoryAxis categoryfield="month" />' +' </horizontalaxis>' +' <series>' +' <Column3DSeries labelposition="inside" yfield="profit" displayname="profit">' +' <showdataeffect>' +' <SeriesInterpolate/>' +' </showdataeffect>' +' </Column3DSeries>' +' </series>' +' </Column3DChart>' +'</rmatechart>'; // 차트데이터 <3.2. 배열형식의데이터작성및차트에삽입하기. 참고 > var chartdata = [ {"Month":"Jan", "Profit":10000}, 12/170

13 {"Month":"Feb", "Profit":15000}, {"Month":"Mar", "Profit":12000}, {"Month":"Apr", "Profit":30200}, {"Month":"May", "Profit":28000}, {"Month":"Jun", "Profit":12000}, {"Month":"Jul", "Profit":22000}, {"Month":"Aug", "Profit":13000}, {"Month":"Sep", "Profit":22000}, {"Month":"Oct", "Profit":29000}, {"Month":"Nov", "Profit":18000}, {"Month":"Dec", "Profit":30000} ]; // 차트설정끝 </script> </head> <body> <div class="container"> <div class="header"> <p>rmate LineChart</p> </div> <div class="desc"> Line Curve </div> <div class="content"> <!-- 차트가삽입될 DIV --> <div id="chartholder" style="width:600px; height:400px;"> </div> </div> </div> </body> </html> < 예제 2 Html 문서에차트삽입하기 > 13/170

14 사용자가웹페이지를작성할때지켜야할사항은다음과같습니다. 1. HTML 의 doctype 을지정하십시오. ( 다른 doctype 이어도무방합니다 ) <!DOCTYPE html> 2. rmatecharth5license.js 와 rmatecharth5.js, rmatecharth5.css 를포함시켜주십시오. <script language="javascript" type="text/javascript" src="../licensekey/rmatecharth5license.js"></script> <script language="javascript" type="text/javascript" src="../rmatecharth5/js/rmatecharth5.js"></script> <link rel="stylesheet" type="text/css" href="../rmatecharth5/assets/rmatecharth5.css"/> 3. 차트가생성될 Div 태그를지정하여영역을확보해주십시오. <div id="chartholder" style="width:600px; height:400px;"></div> 4. 차트의레이아웃과데이터를작성하여주십시오. 5. rmatecharth5.create() 함수호출로차트를생성합니다. // rmatechart 를생성합니다. // 파라메터 ( 순서대로 ) // 1. 차트의 id ( 임의로지정하십시오. ) // 2. 차트가위치할 div 의 id ( 즉, 차트의부모 div 의 id 입니다.) // 3. 차트생성시필요한환경변수들의묶음인 chartvars // 4. 차트의가로사이즈 ( 생략가능, 생략시 100%) // 5. 차트의세로사이즈 ( 생략가능, 생략시 100%) rmatecharth5.create("chart1", "chartholder", chartvars, "100%", "100%"); 6. IE 7, 8 에서차트가보여지길원한다면 excanvas.js 파일을포함시켜주십시오. IE 7, 8 에서는 HTML5 가지원되지않습니다. 그러나 excanvas.js 로 HTML5 의 canvas 를비교적가깝게표현할수있습니다. ( 단, 성능저하및제약사항이발생합니다.) <!--[if IE]><script language="javascript" type="text/javascript" src="../rmatecharth5/js/excanvas.js"></script><![endif]--> excanvas.js 에대한사항은 참고하십시오. 14/170

15 2.3. 차트버전정보보기 rmatechart for HTML5 의버전정보는향후기술지원이나업그레이드시반드시필요합니다. 보통제공 된시디에버전정보가함께표시되나이미제작된웹페이지의차트버전을확인하고자하는경우다음 과같이확인할수있습니다. 자바스크립트에서 rmatecharth5.create() 함수로차트를작성하였듯이 rmatecharth5.version 을콘솔이나 alert 창으로띄워출력해볼수있습니다. alert(rmatecharth5.version); 3. 차트데이터형식 rmate Chart 의수치데이터는 XML 형식과배열형식을지원합니다. 사용자는몇가지규칙에따라차트데이터를작성할필요가있습니다. 규칙에의거하여단일데이터 ( 차트의싱글시리즈 ) 와다중데이터 ( 차트의멀티시리즈 ) 를 XML 형식과배열형식으로각각변환하여어떻게차트에삽입하는지를이번장에서설명합니다 XML 형식의데이터작성및차트에삽입하기. XML 형식으로데이터를작성할때반드시준수해야할점은한개의데이터를감싸는노드는반드시 <item> 으로시작하여 </item> 으로끝을맺어야합니다. rmatecharth5 는 <item> 의개수만큼데이터를출력하게됩니다. 데이터 XML 파일에서 <item></item> 이존재하지않는다면차트는데이터를표현하지않습니다. 단일데이터 ( 즉, 차트의싱글시리즈 ) 는표현하고자하는수치가한개일때유효하며, 다중데이터 ( 즉, 차트의멀티시리즈 ) 는표현하고자하는수치가 2 개이상일때유효합니다. 매출 (Revenue), 비용 (Cost), 이윤 (Profit) 을바탕으로월간보고서를차트로표현하기위해데이터를작성해보도록하겠습니다. 월 (Month) 매출 (Revenue) 비용 (Cost) 이윤 (Profit) Jan. 10,000 5,000 5,000 Feb. 15,000 7,000 8,000 Mar. 12,000 6,000 6,000 Apr. 30,200 4,000 26,200 May. 28,000 10,000 18,000 Jun. 12,000 5,000 7,000 Jul. 22, ,000 Aug. 13,000 6,000 7,000 15/170

16 Sep 22,000 10,000 12,000 Oct. 29,000 8,000 11,000 Nov. 18,000 7,500 10,500 Dec. 30,000 12,000 28,000 <XML 형식의데이터 > <items> <item> <Month>Jan</Month> <Revenue>10000</ Revenue > <Cost>5000</Cost> <Profit>5000</Profit> </item> <item> <Month>Feb</Month> <Revenue>15000</Revenue> <Cost>7000</Cost> <Profit>8000</Profit> </item>... <item> <Month>Dec</Month> <Revenue>30000</Revenue> <Cost>12000</Cost> <Profit>18000</Profit> </item> </items> XML 형식으로데이터를변환할때데이터한개의시작과끝은반드시 item 이여야합니다. < 예제 3 XML 형식으로데이터변환 > 위와같이다중데이터 ( 멀티시리즈 ) 를 XML 유형으로표현할수있습니다. 16/170

17 예를들어위에작성한 XML 데이터를 singledata.xml 로저장하였다면아래와같이차트에 singledata.xml 의경로 ( 또는 URL) 를넘겨줘야합니다. document.getelementbyid( chart1 ).setdataurl( Xml/singleData.xml); 참고 : 차트의 setdataurl 은 RPC 이기때문에확장자가 xml 일필요가없습니다. 중요한점은응답으로 받는 XML 형식입니다. 따라서서버사이드에맞게 (jsp, php 등 ) XML 을작성하는모듈이있다면해당모 듈의주소가가능합니다 배열형식의데이터작성및차트에삽입하기. rmatecharth5 는사용자의편의를위하여배열형식의데이터를차트에삽입할수있도록하였습니다. 그방법에대한설명입니다. 매월이윤에대해자바스크립트에서배열형식으로데이터를작성해보도록하겠습니다. 월 (Month) 이윤 (Profit) Jan. 10,000 Feb. 15,000 Mar. 12,000 Apr. 30,200 May. 28,000 Jun. 12,000 Jul. 22,000 Aug. 13,000 Sep 22,000 Oct. 29,000 Nov. 18,000 Dec. 30,000 var chartdata = [{"Month":"Jan", "Profit":10000}, {"Month":"Feb", "Profit":15000}, {"Month":"Mar", "Profit":12000}, {"Month":"Apr", "Profit":30200}, {"Month":"May", "Profit":28000}, {"Month":"Jun", "Profit":12000}, {"Month":"Jul", "Profit":22000}, {"Month":"Aug", "Profit":13000}, {"Month":"Sep", "Profit":22000}, {"Month":"Oct", "Profit":29000}, {"Month":"Nov", "Profit":18000}, {"Month":"Dec", "Profit":30000} ]; < 예제 4 배열형식으로데이터변환 > 위와같이배열형식으로변환할수있습니다. 3.1 장에서작성된매출 (Revenue), 비용 (Cost), 이윤 (Profit) 을바탕으로작성된다중데이터를배열형식으로 변환하면다음과같습니다. var chartdata = [{"Month":"Jan", "Revenue":10000, Cost :5000, Profit :5000}, 17/170

18 {"Month":"Feb", "Revenue":15000, Cost :7000, Profit :8000}, {"Month":"Mar", "Revenue":12000, Cost :6000, Profit :6000}, {"Month":"Apr", "Revenue":30200, Cost :4000, Profit :26200}, {"Month":"May", "Revenue":28000, Cost :10000, Profit :18000}, {"Month":"Jun", "Revenue":12000, Cost :5000, Profit :7000}, {"Month":"Jul", "Revenue":22000, Cost :10000, Profit :12000}, {"Month":"Aug", "Revenue":13000, Cost :6000, Profit :7000}, {"Month":"Sep", "Revenue":22000, Cost :10000, Profit :12000}, {"Month":"Oct", "Revenue":29000, Cost :8000, Profit :21000}, {"Month":"Nov", "Revenue":18000, Cost :7500, Profit :10500}, {"Month":"Dec", "Revenue":30000, Cost :12000, Profit :18000} ]; < 예제 5 배열형식으로다중데이터변환 > 이와같이작성된차트데이터를차트에삽입하는방법은아래와같습니다. document.getelementbyid( chart1 ).setdata(chartdata); 18/170

19 4. 차트설정및연동방식 4.1. chartvars 설정하기 chartvars 변수는 rmatecharth5 의데이터, 레이아웃등을설정할수있는가장기본적인변수입니다. 이 변수는스크립트단에서차트를생성할때파라메터로함께삽입하게됩니다. chartvars 변수설정은다음과같은규칙을따릅니다. chartvars 변수는스트링입니다. 두개이상의설정을하기위해구분자 & 를사용합니다. 예를들어데이터 XML URL 과레이아웃 XML URL 을설정하는방법은아래와같습니다 var layouturl = "./Column_3D_Layout.xml"; var chartvars = "layouturl="+layouturl; var dataurl = "./singledata.xml"; chartvars += "&dataurl="+dataurl; chartvars 로설정가능한속성값은다음과같습니다. 속성명 유효값 설명 layouturl URL 주소 레이아웃 URL 경로 dataurl URL 주소 데이터 URL 경로 rmateonloadcallfunction 자바스크립트함수명 차트준비가완료된경우호출할함수설정 ( 최초 1번만호출됨 ) 파라메터 : id 차트생성시사용자가지정한 id displaycompletecallfunction 자바스크립트함수명 차트데이터가모두렌더링된경우호출할함수설정파라메터 : id 차트생성시사용자가지정한 id usedataeditor true, false 해당페이지의차트에데이터에디터를사용할지설정합니다. usepattern true, false 해당페이지의차트에색맹, 색약을가지고계신분들을위한패턴이미지를출력할지설정합니다. 19/170

20 rmateonloadcallfunction 과 displaycompletecallfunction 의차이점. rmateonloadcallfunction 은차트준비가완료된후호출되는함수입니다. 이함수는알메이트차트준비가완료되었기에데이터, 레이아웃을삽입할때많이쓰입니다. 그러나 displaycompletecallfunction 은차트에주어진데이터와레이아웃을바탕으로차트출력이완전히완료되었을경우호출되는함수입니다. 따라서이함수가호출되었을경우에는화면에차트출력이끝난것으로볼수있습니다. 차트출력이마무리되고어떤작업을해야할경우유용하게쓸수있는함수입니다. chartvars 사용예. var rmateonloadcallfunction = "rmatechartonload"; chartvars = "rmateonloadcallfunction="+rmateonloadcallfunction; function rmatechartonload(id) { } 위와같이 chartvars 를설정한후실제적으로차트를생성하는함수에, 설정한 chartvars 를파라메터로 넣어줍니다. rmatecharth5.create("chart1", chartholder", chartvars, 500, 500); 4.2. 차트에접근가능한함수들 사용자의편의를위해 rmate Chart 는다음과같은함수를열어놓았습니다. 1. setdatatype() : 차트에적용하는데이터의형태를설정합니다. 2. setdataurl(value) : 데이터 XML URL 경로를차트에삽입합니다. 3. setlayouturl (value): 레이아웃 XML URL 경로를차트에삽입합니다. 4. setdata (value): 배열형태또는 XML 스트링형태의데이터를차트에삽입합니다. 5. setlayout (value): 스트링형태의레이아웃을차트에삽입합니다. 6. setslidedataset (value): 슬라이더기능에서사용할데이터셋을설정합니다. 7. setslidelayoutset (value): 슬라이더기능에서사용할레이아웃셋을설정합니다. 8. saveasimage(): 차트이미지를이미지로변환하려할때차트의스냅샷을얻어냅니다. 9. getsnapshot(): 차트이미지서버에전송할때 base64 로인코딩된형태의스냅샷을얻어냅니다. 20/170

21 10. resize(): 차트전체의크기를변경하고싶을경우호출합니다. 11. legendcheck(value): 레이아웃의에서 Legend 를 usevisiblecheck= true 로설정했을경우 value 에해당하는인덱스의 Series 를선택 / 해제할수있습니다. 12. legendallcheck(value): 레이아웃에서 Legend 를 usevisiblecheck= true 로설정했을경우범례의전체선택 (true)/ 전체해제 (false) 를제어할수있습니다. 13. showadditionalpreloader(): 프리로더를강제로표시합니다. 14. removeadditionalpreloader(): 표시된프리로더를제거합니다. 15. visibleitemsize(): 스크롤차트출력후화면에보여지는아이템개수를제어할수있습니다. 16. hasnodata(): 데이터가존재하지않는다는창을차트위에출력합니다. 17. changescrollbarsize(): 기본스크롤바의크기를변경할수있습니다. 18. showdataeditor(): 숨겨져있는데이터에디터를보여지도록설정합니다. 19. hidedataeditor(): 출력되어져있는데이터에디터를숨깁니다. 20. getcsvdata(): 출력되어져있는차트데이터를 CSV 형태로반환합니다. 21. setdatadrilldown(value): 차트에대해드릴다운데이터를보여주려할때데이터를설정합니다. 22. setdatadrilldownurl(url): 드릴다운에대한데이터를 URL 형식으로설정합니다. 23. getdrilldowndepth(): 현재드릴다운되어있는 depth 를반환합니다. 24. sliderplay(): 모션차트일경우특정버튼으로슬라이더를진행하도록합니다. 25. sliderpause(): 진행중인슬라이더를멈추도록합니다. 26. sliderreset(): 슬라이더를초기화하도록합니다. 위함수들을활용하여 rmate Chart 는총 6 가지방법으로데이터와레이아웃을삽입할수있습니다. 이것 을정리한표는아래와같습니다. 레이아웃 데이터 사용함수 첫번째방법 XML 경로 XML 경로 setlayouturl( 경로 ), setdataurl( 경로 ) 두번째방법 XML 경로 배열형태 setlayouturl( 경로 ), setdata( 배열 ) 세번째방법 XML 경로 XML 스트링 setlayouturl( 경로 ), setdata( 스트링 ) 네번째방법 스트링형태 XML 경로 setlayout( 스트링 ), setdataurl( 경로 ) 다섯번째방법 스트링형태 배열형태 setlayout( 스트링 ), setdata( 배열 ) 여섯번째방법 스트링형태 XML 스트링 setlayout( 스트링 ), setdata( 스트링 ) 일곱번째방법스트링형태 CSV 경로 setdatatype( csv ) setlayout( 스트링 ) setdataurl( 경로 ) < 표 1 차트에레이아웃과데이터를삽입하는방법을나타낸표 > 위함수를이용하여레이아웃을동적으로바꾸거나변경된데이터를동적으로삽입할수있습니다 이에대한예제는주어진샘플의 Chart Properties -> 데이터생성및연동방식을참고하여주십시오. 21/170

22 표 1 에해당하는차트에레이아웃과데이터를삽입후차트에접근하여 legendallcheck 함수를 실행할경우에는차트에 displaycompletecallfunction 을설정하여해당콜백함수에서차트에접근하여 legendallcheck 함수를실행하도록하십시오. 5. 차트와레이아웃 레이아웃작성방법에대하여. rmate 차트의모든레이아웃은 <rmatechart> 태그로시작하여 </rmatechart> 태그로끝납니다. 레이아웃은크게 Options 와차트 ( 칼럼, 바, 파이등의차트 ), Style 세부분으로구분됩니다. 사용자는 Options 태그에서차트의제목 (Caption) 과부제목 (SubCaption) 그리고범례 (Legend) 를삽입할수있습니다. 레이아웃을작성하는방법은기본적으로 XML 형식입니다. rmate 차트는 ID 에의한객체접근을지원합니다. 예를들어 Column3DSeries 객체의속성으로 fill 이 존재합니다. 이 fill 속성의속성값으로 SolidColor 인스턴스를할당합니다. 이를표현한일반적인방법은 아래와같습니다. <rmatechart> <Column3DChart showdatatips="true">... <series> <Column3DSeries yfield="profit"> <fill> <SolidColor color="0xff0000"> </fill> </Column3DSeries> </series> </Column3DChart> </rmatechart> < 예제 6 일반적인속성값할당법 > 그러나사용자의편의를위해 < 예제 7 ID 에의한속성값할당법 > 과같이 SolidColor 인스턴스를미리생성한후그 ID 를통해 SolidColor 인스턴스를활용할수있습니다. 이는여러객체들이하나의 SolidColor 인스턴스에접근하고자할때불필요하게 SolidColor 인스턴스를생성하지않고미리만들어진하나의 SolidColor 에접근하기때문에효율적입니다. 또한어느특정객체를반드시참조해야하는경우에도효율적입니다. 22/170

23 <rmatechart> <SolidColor id="color1" color="0xff0000"/> <Column3DChart showdatatips="true">... <series> // 객체 ID인경우엔시작과끝을중괄호 ({,}) 로묶음 <Column3DSeries yfield="profit" fill="{color1}"/> <Column3DSeries yfield="cost" fill="{color1}"/> </series> </Column3DChart> </rmatechart> < 예제 7 ID 에의한속성값할당법 > 인스턴스 ID 에의한접근을활용한좋은예는수직축 2 개를생성하여서로다른시리즈가각각의축을 참조하는것입니다. 앞으로레이아웃을작성할때 ( 차트종류에관계없이 ) Chart 와 Series 가자주나오게될것입니다. 이에 대한개념을정리하면아래와같습니다. 차트 (Chart) 시리즈 (Series) 설명실질적인차트입니다. 차트는외형을담당합니다. 축, 배경, 차트사이즈등등이포함됩니다. 가장중요한역할로시리즈의위치 ( 좌표 ) 를지정합니다. 실질적인데이터를표현합니다. 표현하고자하는수치데이터가 3개인경우반드시시리즈를 3개정의할필요가있습니다. < 표 2 차트와시리즈설명표 > 비고 ColumnChart, Column3DChart, PieChart, Pie3DChart, BarChart 등등 ColumnSeries, Column3DSeries, BarSeries, Pie3DSereis 등등 5.2. 레이아웃의 rmatechart 노드설정하기. rmatechart 노드는레이아웃의시작과끝을나타냅니다. 또한이노드의속성은차트전체의꾸미기를 담당합니다. 아래는 rmatechart 노드의속성사용예를나타낸것입니다. 23/170

24 <rmatechart cornerradius="12" borderstyle="solid" backgroundcolor="0xffff77"> <Options> <Caption text="anual Report" />... </rmatechart> < 예제 8 rmatechart 노드의속성사용예 > 5.3. 레이아웃의 Options 노드설정하기. Options 는레이아웃의필수사항이아닌선택사항입니다. 차트에제목이나부제목, 범례 (Legend) 를 삽입하고자할때작성하십시오. <rmatechart> <Options> <Caption text="annual Report"/> // 제목 <SubCaption text="2008"/> // 부제목 <Legend/> // 범례 </Options> <Column3DChart showdatatips="true" width="100%" height="100%" > <series> <Column3DSeries yfield="profit" displayname="profit">... </Column3DChart> </rmatechart> < 예제 9 Options 태그사용예 > 차트제목 (Caption), 부제목 (SubCaption) 넣기. < 예제 9 Options 태그사용예 > 는칼럼 3D 차트의레이아웃입니다. 제목은 <Caption> 태그의 text 속성에 원하는문구를넣으시면됩니다 차트범례 (Legend) 넣기. 24/170

25 차트의범례 (Legend) 는보통멀티시리즈 ( 다중데이터표현 ) 인경우각시리즈가표현하는데이터의대표자를표시하는역할을합니다. 범례 (Legend) 작성시에는차트시리즈 ( 즉, 칼럼 3D 차트인경우 <Column3DSeries> 태그 ) 의속성인 displayname 을정의하여야합니다. 여기서정의한문자열이범례의텍스트로출력됩니다. 출력결과 적 position= right position= top position= left 용 direction= vertical direction= horizontal direction= vertical 속 usevisiblecheck= true usevisiblecheck= true usevisiblecheck= false 성 valign= middle halign= right valign= bottom < 예제 10 다양한범례속성을적용한예 > 데이터에디터사용하기 데이터에디터는차트하단에출력되며, 에디터의셀을더블클릭하여차트데이터의확인, 수정이가능하게합니다. 차트에서데이터에디터를사용하는법은간단합니다. 차트환경변수 chartvars 에 usedataeditor=true 를추가하신후레이아웃에서 <Opionts> ~ </Options> 안에 <DataEditor../> 를설정해주시면됩니다. 데이터에디터내의속성은제품내의 Docs/api/inedxe.html 실행후 DataEditor 부분을살펴보시기바랍니다. 25/170

26 < 그림 2 데이터에디터사용모습 > 5.4. 레이아웃의 Style 노드 (CSS 적용 ) 설정하기. <Style> 노드는전반적인스타일을미리정의하는스타일시트입니다. <Style/> 을선언하는방법에는몇 가지규칙이있습니다. 첫째, <Style/> 노드는반드시 <rmatechart> 노드의자식위치에정의하십시오. 둘째, 스타일네임을정의할때시작은도트 (.) 를찍고소문자로시작하는영문자로표기하십시오. 셋째, 스타일네임을정한후그에따른구체적인스타일을정의할때는반드시중괄호 ({,}) 로시작과끝을표시하십시오. 넷째, 속성명과속성값 (value) 의구분은콜론 (:) 이며끝은세미콜론으로나타냅니다. 다음은올바른예와잘못된예를나타낸것입니다. <rmatechart> <Options> 올바른예 <rmatechart> <Options> 잘못작성된예 <Style>.rMateChartStyle { backgroundcolor:0xfffffe; <Style> ChartStyle [ backgroundcolor:0xfffffe; 26/170

27 bordercolor:0x77ee9e; cornerradius:12; borderthickness:3; borderstyle:solid; } <Style> </rmatechart> bordercolor: 0x77EE9E ; cornerradius,12; borderthickness:3; borderstyle: solid ; ] <Style> </rmatechart> < 표 3 Style 작성예 > 위와같이 rmatechartstyle 스타일을정의였습니다. 그렇다면이스타일을적용하는방법에대해보도록하겠습니다. <rmatechart stylename="rmatechartstyle"> <Options> <Caption text="annual Report"/> </Options>... <Style>.rMateChartStyle { backgroundcolor:0xfffffe; bordercolor:0x77ee9e; cornerradius:12; borderthickness:3; borderstyle:solid; } <Style> </rmatechart> < 예제 11 Style 적용예 > < 예제 11 Style 적용예 > 를보시면 rmatechartstyle 은 <rmatechart/> 노드의스타일을정의한것이고 적용법은 stylename= 정의한스타일이름 즉, stylename= rmatechartstyle 과같습니다. 시리즈의 labelalign 은칼럼시리즈와바시리즈에만해당되는속성입니다. 각각의유효속성값으로칼럼시 리즈인경우 top middle bottom 바시리즈인경우 left center right 입니다. 27/170

28 스타일을활용한예제와출력모습은아래와같습니다. <rmatechart stylename="rmatechartstyle"> <Options> <Caption text="annual Report" stylename="captionstyle"/> <SubCaption text="riamore Soft" stylename="subcaptionstyle"/> </Options> <DateFormatter id="datefmt" formatstring="m/d"/> <NumberFormatter id="numfmt"/> <Line2DChart showdatatips="true" stylename="chartstyle"> <horizontalaxis> <CategoryAxis id="haxis" categoryfield="month" title="horizontal Axis"/> </horizontalaxis> <horizontalaxisrenderers> <Axis2DRenderer axis="{haxis}" axistitlestylename="chartaxisstyle"/> </horizontalaxisrenderers> <series> <Line2DSeries yfield="revenue" displayname="revenue"> <showdataeffect> <SeriesInterpolate/> </showdataeffect> </Line2DSeries> </series> </Line2DChart> <Style>.rMateChartStyle { backgroundcolor:#fffffe; bordercolor:#77ee9e; cornerradius:12; borderthickness:3; borderstyle:solid; }.captionstyle { fontsize:12; fontfamily:tahoma; fontweight:bold; color:#777777; }.subcaptionstyle { fontsize:11; 28/170

29 fontstyle:italic; color:#777777; }.chartstyle { fontsize:11; fontstyle:italic; color:#0000ff; }.chartaxisstyle { color : #4691E1; fontsize : 14; fontweight : bold; fontstyle : italic; } </Style> </rmatechart> < 예제 12 Style 적용한예제 > < 그림 3 Style 적용결과 > 29/170

30 30/170

31 6. 차트유형별레이아웃설정하기 차트의공통적인속성알아보기. 차트는크게축이존재하는 Cartesian 차트와축이없는 Polar 차트로나뉩니다. 축이있는차트의 기본적인속성에대한설명은아래와같습니다. 속성명 유효값 설명 horizontalaxis CategoryAxis, LinearAxis, DateTimeAxis, 수평축 (X축) 을정의합니다. LogAxis 객체 verticalaxis CategoryAxis, LinearAxis, DateTimeAxis, 수직축 (Y축) 을정의합니다. LogAxis 객체 horizontalaxisrenderer Axis3DRenderer, AxisRenderer 수평축의렌더러를정의합니다. verticalaxisrenderer Axis3DRenderer, AxisRenderer 수직축의렌더러를정의합니다. series 차트의시리즈 ( 예 :Column3DSeries, 차트시리즈를정의합니다. Line2DSeries 등등 ) annotationelements GridLines, Image, CanvasElement, CrossRangeZoomer 등 차트앞쪽 (z-index 개념으로상단 ) 에위치할엘리먼트를정의합니다. backgroundelements GridLines, Image, CanvasElement 등 차트뒷배경에위치할엘리먼트를정의합니다. showdatatips true false 마우스오버시데이터팁 ( 툴팁 ) 의유무를나타냅니다. paddingtop Number 위쪽여백 paddingbottom Number 아래여백 paddingleft Number 왼쪽여백 paddingright Number 오른쪽여백 itemclickjsfunction 자바스크립트함수명 아이템클릭시차트가호출할함수를나타냅니다. datatipjsfunction 자바스크립트함수명 데이터팁 ( 툴팁 ) 을사용자정의할함수를나타냅니다. gutterleft Number 차트축을기준으로왼쪽여백 gutterright Number 차트축을기준으로오른쪽여백 guttertop Number 차트축을기준으로윗쪽여백 gutterbottom Number 차트축을기준으로아래여백 < 예제 13 Cartesian 차트의공통적인속성설명 > 31/170

32 아래는도넛, 파이차트와같이축이없는 Polar 차트의속성에대한설명입니다. 속성명 유효값 설명 innerradius 0.0 ~ 1.0( 기본값 :0.0) 도넛차트와같이가운데공간의정도를표현합니다. 1.0 에가까울수록가운데공간이커집니다. showdatatips true false( 기본값 :false) 마우스오버시데이터팁 ( 툴팁 ) 의유무를나타냅니다. explodable true false( 기본값 :true) 마우스클릭시도넛, 파이차트의조각이떨어져나오는효과를나타냅니다. series PieGradationSeries, Pie3DSeries 차트의시리즈를정의합니다. itemclickjsfunction 자바스크립트함수명 아이템클릭시차트가호출할함수를나타냅니다. datatipjsfunction 자바스크립트함수명 데이터팁 ( 툴팁 ) 을사용자정의할함수를나타냅니다. < 예제 14 Polar 차트의공통적인속성설명 > 6.2. Cartesian 차트의축에대하여. 파이차트, 도넛차트외의차트에는 X 축 ( 수평축 ) 과 Y 축 ( 수직축 ) 이존재합니다. 축의종류에는크게카테고리유형과수치유형 2 개가있습니다. 스트링형태를정의하는축이 CategoryAxis 입니다. 이는보통차트에서수치화할수없지만그룹화가가능한계열을위한것입니다. 예를들면경영부, 연구부, 회계부와같이수치화될수없지만일개그룹으로묶어축필드로사용하고자할때 CategoryAxis 를사용합니다. 수치유형으로는 LinearAxis, LogAxis, DateTimeAxis 3 가지 Type 이있습니다. LinearAxis 는연속적인데이터 ( 즉, 일반적인수치 ) 를위한것이고, LogAxis 는 Log 함수에의한정의입니다. 마지막으로 DateTimeAxis 는날짜, 시간과관련이있습니다. 아래표는각각의축에대한속성명과유효값에대한설명입니다. Axis 명속성명유효값설명카테고리축이참조할데이터의특정데이터의특정필드명 categoryfield 필드명을입력하세요. 카테고리축을 ( 예 :Month) CategoryAxis 정의하였을때반드시입력하셔야합니다. 데이터팁 ( 툴팁 ) 에나타날축을대표하는 displayname String( 문자열 ) 문자열입니다. 32/170

33 LinearAxis DateTimeAxis title Stirng( 문자열 ) 축의제목 ( 대표문자 ) 입니다. labeljsfunction 자바스크립트함수명 축라벨텍스트를사용자정의할함수를나타냅니다. interval Number 축에나타나는라벨의간격을나타냅니다. displayname String( 문자열 ) 데이터팁 ( 툴팁 ) 에나타날축을대표하는문자열입니다. minimum Number 축라벨의최소치를나타냅니다. maximum Number 축라벨의최대치를나타냅니다. title Stirng( 문자열 ) 축의제목 ( 대표문자 ) 입니다. labeljsfunction 자바스크립트함수명 축라벨텍스트를사용자정의할함수를나타냅니다. milliseconds, seconds, 차트가출력할데이터의표시에사용하는 dataunits minutes, hours, days, 단위를지정합니다 weeks, months, years milliseconds, seconds, 라벨에나타날단위를지정합니다. labelunits minutes, hours, days, weeks, months, years title Stirng( 문자열 ) 축의제목 ( 대표문자 ) 입니다. 축에나타나는라벨의시간, 날짜간격을 interval Number 나타냅니다. ( 라벨이나타날공간이작을경우지정된 interval 값은무시될수있습니다.) dataunits 로지정된그래프내의데이터간 의 간격을 지정합니다. 예를 들어 dataunits= seconds 로 설정하고 데이터 간격은 3초단위라면 datainterval은 4로 datainterval Number 줄필요가있습니다. 단위가초단위이므로차트는그자리를마련합니다. datainterval= 4 는 3초단위를하나로본 다는뜻으로 4번째자리부터그래프를렌 더링합니다. ( 차트 type 에따라무시되기도 합니다.) displayname String( 문자열 ) 데이터팁 ( 툴팁 ) 에나타날축을대표하는문자열입니다. true 로설정되었을경우는, DateTimeAxis 에의해, 모든데이터치가어플리케이션을 displaylocaltime false true( 기본값 :false) 실행하는클라이언트머신의타임존에 있다고보여집니다. false 로설정되었을 경우, 모든값은세계표준시 ( 그리니지 33/170

34 LogAxis 표준시 ) 가됩니다. labeljsfunction 자바스크립트함수명 축라벨텍스트를사용자정의할함수를나타냅니다. interval 10의승수 10의승수단위로라벨에표시합니다. minimum Number 축라벨의최소치를나타냅니다. maximum Number 축라벨의최대치를나타냅니다. title Stirng( 문자열 ) 축의제목 ( 대표문자 ) 입니다. displayname String( 문자열 ) 데이터팁 ( 툴팁 ) 에나타날축을대표하는문자열입니다. labeljsfunction 자바스크립트함수명 축라벨텍스트를사용자정의할함수를나타냅니다. < 표 4 각각의 Axis 속성명과유효값설명 > CategoryAxis 와 LinearAxis 예제. 아래예제를보면수평축으로 CategoryAxis 를정의하였습니다. CategoryAxis 의 categoryfield 는반드시차트데이터와일치시켜야합니다. 데이터의 Month 필드를수평축의카테고리로활용한다는뜻이됩니다. 만약축을정의하지않으면기본값으로 LinearAxis 가됩니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text="anual Report"/> </Options> <Column3DChart showdatatips="true"> <horizontalaxis> // 수평축으로카테고리축정의 <CategoryAxis categoryfield="month" title="category Axis" /> </horizontalaxis> <verticalaxis> // 수직축으로선형축정의 <LinearAxis maximum="3500" title="linear Axis"/> </verticalaxis> <series> <Column3DSeries yfield="profit" displayname="profit"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Column3DSeries> </series> </Column3DChart> </rmatechart> 34/170

35 < 예제 15 수평축으로카테고리축을, 수직축으로리니어축을정의한예 > DateTimeAxis 와 LogAxis 예제. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text="anual Report"/> </Options> <Line2DChart showdatatips="true"> <horizontalaxis> // 수평축으로 DateTime축정의 <DateTimeAxis dataunits="days" labelunits="days" title="datetime Axis" interval="3" displayname="date" displaylocaltime="true"/> </horizontalaxis> <verticalaxis> // 수직축으로로그축정의 <LogAxis title="log Axis" interval="10" minimum="10" maximum="10000" /> </verticalaxis> <series> <Line2DSeries xfield="date" yfield="profit" displayname="profit"/> </series> </Line2DChart> </rmatechart> < 예제 16 수평축으로 DateTime 축을, 수직축으로로그축을정의한예제 > * 중요 : DateTimeAxis 를사용한경우반드시시리즈 DateTime Field 를명시해줘야합니다. 예를들어칼럼차트의수평축에 DateTimeAxis 를정의한경우 xfield 를정의해야합니다.( 바차트의수직축이 DateTimeAxis 인경우 yfield) 이 xfield 는데이터의시간영역에해당되는필드명을나타냅니다. 이것은 CategoryAxis 의 cateogoryfield 와동일한의미이지만 DateTimeAxis 의속성이아닌시리즈의 xfield( 또는 yfield) 에해당필드를정의함으로써 DateTimeAxis 는데이터시간에맞게표현합니다 칼럼 2D 차트 칼럼 2D 차트는 <Column2DChart> 노드로시작과끝을나타냅니다. <Column2DChart/> 노드의자식 노드로수평축 (horizontalaxis), 수직축 (verticalaxis), 시리즈 (series), 배경엘레멘츠 (backgroundelements) 등을정의합니다. 아래예제는싱글데이터 ( 싱글시리즈 ) 칼럼 2D 차트예제입니다. <Column2DChart> 의 <series> 자식노드로 <Column2DSeries> 를정의한것을볼수있습니다. 이는데이터표현을칼럼시리즈로한다는뜻입니다. 모든차트의데이터표현은시리즈가담당하고있습니다. 35/170

36 그래서시리즈의속성을잘정의하는것이중요합니다. 시리즈의부모노드겪인 Chart( 예를들면 Column2DChart, Bar2DChart 등등 ) 는시리즈의자리배치와축의위치, 배경등외형을담당합니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text="anual Report"/> </Options> <Column2DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month"/> </horizontalaxis> <series> <Column2DSeries yfield="profit" itemrenderer="semicirclecolumnitemrenderer"> <showdataeffect> <SeriesInterpolate/> </showdataeffect> <fill> <SolidColor color= 0xFF0000 alpha= 0.5 /> </fill> <stroke> <Stroke color= 0xFFFF00 weight= 1 /> </stroke> </Column2DSeries> </series> </Column2DChart> </rmatechart> < 예제 17 칼럼차트예제 > <Column2DSeries> 노드의 itemrenderer 는차트의시리즈가어떻게데이터를그래픽적으로표현할지를 결정합니다. ColumnSeries 노드의 itemrenderer 의유효속성값으로는두개가존재합니다. SemiCircleColumnItemRenderer GradientColumnItemRenderer 6.4. 칼럼 3D 차트 36/170

37 칼럼 3D 차트는 <Column3DChart> 노드로시작과끝을나타냅니다. 칼럼 3D 차트의시리즈는 <Column3DSeries> 입니다. 아래는 rmate 멀티시리즈칼럼 3D 차트레이아웃예제입니다. <rmatechart> <Column3DChart showdatatips="true" type= clustered > // 칼럼차트생성, 툴팁보이기 true <horizontalaxis//x축설정, X축은카테고리이며기준필드는 Month <CategoryAxis categoryfield="month"/> </horizontalaxis> <series> // 시리즈는데이터의표현을말합니다. // 칼럼시리즈가 2개반복 Profit, Cost 데이터의표현이한쌍임. <Column3DSeries yfield="profit"> <showdataeffect> // 차트생성시이펙트정의 <SeriesInterpolate/> </showdataeffect> </Column3DSeries> <Column3DSeries yfield="cost"> // 차트데이터값중 Cost를 y축필드에대응시킵니다. <showdataeffect> <SeriesInterpolate/> </showdataeffect> </Column3DSeries> </series></column3dchart></rmatechart> < 표 5 칼럼 3D 차트레이아웃예제 > 칼럼차트의프로퍼티중 type 은차트의데이터출력방식을결정합니다. type 에는 4 가지가존재합니다. clustered : 일반적인다중데이터 ( 차트의멀티시리즈 ) 방식으로데이터를표현합니다. ( 기본값 ) stacked : 데이터를위에쌓아올린방식으로표현합니다. overlaid : 수치데이터값을겹쳐서표현합니다. 주로목표위치와현재위치를나타낼때많이쓰입니다. 100% : 차트의수치데이터를퍼센티지로계산후값을퍼센티지로나타냅니다. 다음은이에대한출력화면입니다. 37/170

38 <type= clustered > <type= 100% > <type= overlaid > <type= stacked > < 그림 4 칼럼차트 Type 별출력결과 > 6.5. 실린더 3D 차트 실린더 3D 칼럼차트 실린더 3D 칼럼차트는칼럼 3D 차트와같습니다. 다만, 큐브형태의칼럼이아닌 3D 원통모양으로데이터를표현합니다. 모든속성및레이아웃작성은 3D 칼럼차트와동일합니다. 작성된 3D 칼럼차트에서시리즈의속성인 itemrenderer 속성에 CylinderItemRenderer 를값으로할당하면실린더 3D 차트가생성됩니다. 다음은 < 표 5 칼럼 3D 차트레이아웃예제 > 레이아웃에아이템렌더러속성을정의한예제입니다. <rmatechart> <Column3DChart showdatatips="true" type= clustered > // 칼럼차트생성, 툴팁보이기 true 38/170

39 <horizontalaxis//x축설정, X축은카테고리이며기준필드는 Month <CategoryAxis categoryfield="month"/> </horizontalaxis> <series> // 시리즈는데이터의표현을말합니다. // 칼럼시리즈가 2개반복 Profit, Cost 데이터의표현이한쌍임. <Column3DSeries yfield="profit" itemrenderer="cylinderitemrenderer"> <showdataeffect> // 차트생성시이펙트정의 <SeriesInterpolate/> </showdataeffect> </Column3DSeries> <Column3DSeries yfield="cost"// 차트데이터값중 Cost를 y축필드에대응시킵니다. itemrenderer="cylinderitemrenderer"> <showdataeffect> <SeriesInterpolate/> </showdataeffect> </Column3DSeries> </series></column3dchart></rmatechart> < 예제 18 실린더 3D 차트레이아웃예제 > < 그림 5 실린더 3D 차트결과모습 > 실린더 3D 바차트 실린더 3D 바차트는바 3D 차트와같습니다. 다만, 큐브형태의칼럼이아닌 3D 원통모양으로데이터를표현합니다. 모든속성및레이아웃작성은 3D 바차트와동일합니다. 작성된 3D 바차트에서시리즈의속성인 itemrenderer 속성에 BarCylinderItemRenderer 를값으로할당하면실린더 3D 차트가생성됩니다 39/170

40 레이아웃작성은 실린더 3D 칼럼차트 를참고하여주십시오. < 그림 6 실린더 3D 바차트출력모습 > 6.6. 바 2D 차트. 바차트는칼럼차트와비슷합니다. 다만수치데이터를 X 축 ( 수평축 ) 에할당해야합니다. 반드시 verticalaxis( 수직축 ) 을정의하여그룹핑에해당되는데이터를수직축필드로입력하고, 수치데이터에해당되는값은수평축필드에할당합니다. 바 2D 차트는 <Bar2DChart> 노드로시작과끝을나타냅니다. Bar 2D 차트의 itemrenderer 속성값으로 2 개의유효값이존재합니다. SemiCircleBarItemRenderer GradientBarItemRenderer 그외속성과속성값은제품내에포함된 API(./Docs/api) 를참고하십시오. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text="anual Report"/> </Options> <Bar2DChart showdatatips="true"> <verticalaxis> <CategoryAxis categoryfield="month"/> </verticalaxis> <series> <Bar2DSeries xfield="profit" itemrenderer="semicirclebaritemrenderer"> 40/170

41 <showdataeffect> <SeriesInterpolate/> </showdataeffect> </Bar2DSeries> </series> </Bar2DChart> </rmatechart> < 예제 19 바차트예제 > < 그림 7 바차트출력결과 > 6.7. 바 3D 차트. 바 3D 차트는 <Bar3DChart> 노드로시작과끝을나타냅니다. 속성및유효값은제품내에포함된 API(./Docs/api) 를참고하삽시오. <rmatechart> <Options> <Caption text="annual Report /> </Options> <Bar3DChart showdatatips="true"> <verticalaxis> // 수직축을설정하고 CateogryAxis 로그룹핑에해당되는 Month정의 <CategoryAxis categoryfield="month" /> </verticalaxis> <series> <Bar3DSeries xfield="profit"> //xfield에수치데이터 Profit <showdataeffect> <SeriesInterpolate /> 41/170

42 </showdataeffect> </Bar3DSeries> </series> </Bar3DChart> </rmatechart> < 예제 20 바 3D 차트예제 > < 그림 8 바 3D 차트출력결과 > 6.8. 파이, 도넛차트, 2D 는 <Pie2DChart> 노드로시작과끝을나타내고, 3D 는 <Pie3DChart> 노드로시작과끝을나타냅니다. 2D 와 3D 차트각각의시리즈는 <Pie2DSeries/> 와 <Pie3DSeries/> 노드로데이터를표현합니다. 파이차트와도넛차트의레이아웃은단한가지를제외하고모두같습니다. 아래레이아웃의 innerradius 프로퍼티값에의해파이차트와도넛차트를표현합니다. innerradius 의 범위는 0 ~ 1 까지이며 0 값이파이차트이며 1 로가까이갈수록도넛차트의가운데공간이커집니다. <rmatechart> <Pie2DChart innerradius="0" showdatatips="true"> <series> <Pie2DSeries namefield="month" // 툴팁에표시할필드이름. < 그림 9 파이차트와도넛차트출력결과 > 툴팁의 November에해당 field="profit" // 파이차트가참고할데이터영역. depth="0.05" //2D 차트의그라데이션깊이 ( 범위 0 ~ 0.2) labelposition="callout"> 42/170

43 <showdataeffect> <! 데이터출력시 SeriesInterpolate 효과표시 <SeriesInterpolate/> </showdataeffect> <fills> <! 시리즈에 2가지색을지정하여 2가지색이반복되고있습니다. <SolidColor color="0xff0000"/> <SolidColor color="0xffffff"/> </fills> </Pie2DSeries> </series> </Pie2DChart> <rmatechart> < 예제 21 파이차트예제 > <innerradius = 0 인경우 > <innerradius = 0.33 인경우 > < 그림 9 파이차트와도넛차트출력결과 > 위와같이파이차트와도넛차트는 innerradius 프로퍼티값에따라달라집니다. 다음으로 labelposition 에대한설명입니다. labelposition 은차트데이터의값을따로표시할때그위치를정의합니다. 할당가능한값과설명은아래와같습니다. none : 데이터값을표시하지않습니다. inside : 차트안에표시합니다. outside : 차트밖에표시합니다. callout : 위예제와같이따로선을긋고표시합니다. insidewithcallout : 기본적으로안쪽에표시하나크기가작아충분한공간이없을때따로선을긋고 callout 형태로표시합니다. 43/170

44 파이, 도넛차트의데이터영역을클릭한경우해당영역을다음과같이데이터영역을빠져나오게할수 있습니다.(explodable 은 true 가기본값입니다.) <rmatechart> <Options> <Caption text="annual Report"/> <SubCaption text="2008"/> </Options> <Pie2DChart explodable= true innerradius="0" showdatatips="true"> <rmatechart> < 예제 22 파이차트해당영역클릭한경우예제와출력모습 > <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text="annual Report"/> <SubCaption text="2008"/> </Options> <Pie3DChart showdatatips="true" explodable="false"> <series> <Pie3DSeries namefield="month" field="profit" labelposition="inside"> <showdataeffect> <SeriesZoom/> </showdataeffect> </Pie3DSeries> </series> </Pie3DChart> </rmatechart> < 예제 23 파이 3D 차트예제 > 44/170

45 < 그림 10 파이 3D 차트출력결과 > 파이 Stacked 3D 차트는시리즈 2 개로표현이가능합니다. 아래는그예제와실행화면입니다. <rmatechart cornerradius="12" borderstyle="solid"> <Options> <Caption text="annual Report" /> <SubCaption text="2008" /> </Options> <Pie3DChart showdatatips="true" explodable="false"> <series> <Pie3DSeries namefield="month" field="profit" displayname="profit" labelposition="inside"> <showdataeffect> <SeriesZoom /> </showdataeffect> </Pie3DSeries> <Pie3DSeries namefield="month" field="cost" displayname="cost" labelposition="inside"> <showdataeffect> <SeriesZoom /> </showdataeffect> </Pie3DSeries> </series> </Pie3DChart> </rmatechart> < 예제 24 파이 Stacked 3D 차트예 > 45/170

46 < 그림 11 파이 3D Stacked 차트출력결과 > 6.9. 버블 3D 차트. 버블 3D 차트는 <Bubble3DChart> 노드로시작과끝을나타내고데이터표현이라할수있는시리즈는 <Bubble3DSeries> 노드로표현합니다. 버블 3D 차트는수치데이터를 X, Y, Radius 3 개의필드에표현합니다. X 는 X 축에대응하는값, Y 는 Y 축, 그리고 Radius 는버블의크기를결정하는값입니다. 실질적으로데이터를표현하는것은시리즈이기때문에 <Bubble3DSeries> 노드의속성으로 xfield, yfield, RadiusField 에각각의수치데이터를입력하십시오. 다음은예제와실행화면입니다. <rmatechart> <Bubble3DChart showdatatips="true"> <series> <Bubble3DSeries xfield="profit" yfield="cost" radiusfield="revenue"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> <fills> <! 6가지색을지정하여 6가지색이반복되고있습니다. <SolidColor color="0xff0000"/> <SolidColor color="0x00ff00"/> <SolidColor color="0x0000ff"/> <SolidColor color="0xff00ff"/> <SolidColor color="0xffff00"/> <SolidColor color="0xffffff"/> </fills> </Bubble3DSeries> </series> </Bubble3DChart> </rmatechart> < 예제 25 버블 3D 차트예제 > 46/170

47 < 그림 12 버블 3D 차트출력결과 > 영역 (Area) 차트. 영역차트의 type 에는 overlaid, stacked, 100% 3 가지가있습니다. 이에대한기능은칼럼차트와같고 영역차트 type 의기본값은 overlaid 입니다.( 칼럼차트는 clustered) Area2DSeries 프로퍼티중 form 은데이터를어떻게표현할지를명시합니다. 아래그림을참고하십시오. <form= segment 기본값 > <form= curve > <form= step > <form= reversestep > 47/170

48 < 그림 13 영역차트 form 별출력결과 > <rmatechart> <Area2DChart showdatatips="true" type="stacked"> <horizontalaxis> <CategoryAxis categoryfield="month" /> </horizontalaxis> <series> <Area2DSeries yfield="profit" form="curve" displayname="profit"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Area2DSeries> <Area2DSeries yfield="cost" form="curve" displayname="cost"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Area2DSeries> <Area2DSeries yfield="revenue" form="curve" displayname="revenue"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Area2DSeries> </series> </Area2DChart> </rmatechart> < 예제 26 영역차트예제 > < 그림 14 영역차트출력결과 > 48/170

49 6.11. 플롯차트 플롯차트는수평축상의위치를나타내는값과수직축상의위치를나타내는값을가지는데이터포인트를직교좌표로나타내는경우에사용합니다. 플롯차트를작성하려면 <Plot2DChart> 로시작하여 </Plot2DChart> 로끝납니다. 시리즈는 <Plot2DSeries> 입니다. 주의 : Plot2DChart 에서는, 각각의 PlotSeries 에 xfield 프로퍼티와 yfield 프로퍼티의양쪽모두를지정하 셔야합니다. 예제를보도록하겠습니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Plot2DChart showdatatips="true"> // 플롯차트생성 <verticalaxis> <LinearAxis maximum="3500" /> </verticalaxis> <horizontalaxis> <LinearAxis maximum="2800" /> </horizontalaxis> <series> <Plot2DSeries xfield="cost" yfield="profit" radius="5" displayname="cost/profit"/> <Plot2DSeries xfield="revenue" yfield="profit" radius="5" displayname="revenue/profit"/> <Plot2DSeries xfield="cost" yfield="revenue" radius="5" displayname="cost/revenue"/> </series> </Plot2DChart> </rmatechart> < 예제 27 플롯차트예제 > 49/170

50 < 그림 15 플롯차트출력결과 > 라인차트. 라인차트는다른 Cartesian 차트와비교하여 type 속성이없습니다. 기본적으로 overlaid 속성입니다. 그리고라인차트의시리즈인 Line2DSeries 의속성으로 form 이존재합니다. 라인시리즈의 form 속성은영역차트의시리즈인 Area2DSeries 의 form 속성과같이 segment, curve, step, reversestep 이존재합니다. 위 Area2DSeries 의 form 속성을표현한그림을참고하십시오. <rmatechart cornerradius="12" borderstyle="solid"> <Options> <Caption text="anual Report" /> </Options> <Line2DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month" /> </horizontalaxis> <series> <Line2DSeries yfield="profit" form="step"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Line2DSeries> <Line2DSeries yfield="cost" form="step"/> <Line2DSeries yfield="revenue" form="step"/> </series> </Line2DChart> </rmatechart> < 예제 28 라인차트예제 > < 그림 16 라인차트출력결과 > 50/170

51 라인차트에서 X 축과 Y 축이만나는지점에 itemrenderer 를적용하여특수하게출력할수있습니다. 출력결과와예제는아래와같습니다. < 그림 17 라인차트에 itemrenderer 적용한경우출력결과 > <rmatechart cornerradius="12" borderstyle="solid" paddingtop="10" paddingbottom="20" paddingright="20" paddingleft="20"> <Options> <Caption text="anual Report" /> </Options> <Line2DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month"/> </horizontalaxis> <series> 1 DiamondItemRenderer"/> <Line2DSeries yfield="profit" radius="10" fill="0xff0000" itemrenderer=" 2 <Line2DSeries yfield="cost" radius="10" fill="0x00ff00" itemrenderer="circleitemrenderer"/> 3 <Line2DSeries yfield="revenue" radius="10" fill="0xffff00" itemrenderer="triangleitemrenderer"/> </series> </Line2DChart> </rmatechart> < 예제 29 라인차트에 itemrenderer 적용한예제 > Line2DSeries 에 itemrenderer 를적용할때따르는주요속성은아래와같습니다. radius : X 축과 Y 축이만나는지점에도형의크기를결정합니다. fill : 도형 (itemrenderer) 의안쪽컬러를지정합니다. 51/170

52 stroke : 도형의테두리선을지정합니다. 라인차트전체라인의색과두께조정은 linestroke 속성을이용합니다. 이에대한설명은 < 예제 51 라인차트의선 (stroke) 를변경한경우 > 를참고하십시오. 라인차트의 itemrenderer 속성값으로다음유효값이존재합니다. DiamondItemRenderer 위예제 1 번에해당. CircleItemRenderer 위예제 2 번에해당. TriangleItemRenderer 위예제 3 번에해당. CrossItemRenderer - 십자가모양 XShapeItemRenderer - X 자모양 IShapeItemRenderer I 자모양 RectangleItemRenderer 네모모양 점선 (Dashed-Line) 차트 점선차트 (Dashed-Line Chart) 는라인차트의모든기능을포함하고, 레이아웃작성법또한같습니다. 라 인차트와비교하여점선차트의고유속성은다음과같습니다. 속성명유효값설명 linestyle dashlineplacement, dashlineseperatepos dashlinepattern normal, dashline 라인차트에서라인의 type 을나타냅니다. 점선차트를생성하기위해서는 dashline 으로값을할당하십시오. before, after dashlineseperatepos 을 설정한 경우 점선을 dashlineseperatepos 기준으로전에나타낼지후에나타낼지 를결정합니다. 데이터의 인덱스 점선과실선을같이사용하고자할때의경계점을나타냅니다. ( 즉, uint) 이점은데이터의인덱스입니다. Number( 픽셀단 표현할점선의길이를지정합니다. 위 ) 예를들어 5 를지정시 5픽셀에해당되는선을그린후 ( 기본값 : 10) 5픽셀에해당되는공백을생성합니다. 이패턴을반복합니다. 길이를크게할수록성능은 향상됩니다. 차트렌더링이느리다면패턴길이를길게 잡으십시오. < 표 6 점선차트속성유효값및설명 > <rmatechart backgroundcolor="0xffffff" cornerradius="12" borderstyle="solid"> 52/170

53 <Line2DChart showdatatips="true" > <horizontalaxis> <CategoryAxis categoryfield="month" padding="0.5" /> </horizontalaxis> <series> <Line2DSeries labelposition="up" yfield="profit" radius="4 linestyle="dashline" // 점선차트로표현 dashlineseperatepos="5" // 인덱스5( 즉, 6번째데이터 ) 에서점실선나뉨 dashlineplacement="before" // 점선은앞에나타남 itemrenderer=" RectangleItemRenderer"> </Line2DSeries> </series> </Line2DChart> </rmatechart> < 표 7 점선차트예제 > < 그림 18 점선차트출력모습 > 콤비네이션차트. 콤비네이션차트는서로다른유형의차트가함께있는것을말합니다. 아래예제는칼럼차트와 라인차트가함께데이터를표현하는콤비네이션차트입니다. 칼럼차트라면 series 프로퍼티에 2D 인경우 Column2DSeries, 3D 인경우 Column3DSeries 로데이터를표현하였지만콤비네이션차트에서는칼럼차트와라인차트두차트의시리즈 ( 데이터표현 ) 가존재하므로칼럼시리즈를묶을수있는 Column2DSet 또는 Column3DSet 을정의하십시오. 2D 를표현하기위해 Column2DSet 을정의한후그자식으로 Column2DSeries 를원하는데이터표현만큼정의하십시오. 53/170

54 Column2DSet( 또는 Column3DSet) 의 type 은일반칼럼차트의 type 과동일합니다. < 그림 4 칼럼차트 Type 별출력결과 > 참고. ( 그러나기본값은 overlaid) Column2DSet 과형제인위치에 Line2DSeries 를정의하십시오. 위의설명을구체화한코드입니다. <rmatechart> <Combination2DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month"/> </horizontalaxis> <series> <Column2DSet type="clustered"> <series> <Column2DSeries yfield="profit" displayname="profit"/> <Column2DSeries yfield="revenue" displayname="revenue"/> </series> </Column2DSet> <Line2DSeries yfield="cost" displayname="cost"> <linestroke> // 라인시리즈의라인의두께, 색을지정합니다. <Stroke color="0xffcc00" weight="4"/> </linestroke> </Line2DSeries> </series> </Combination2DChart> </rmatechart> < 예제 30 콤비네이션차트예제 > 다음은위의예제출력화면입니다. < 그림 19 Column2DSet type="clustered" 설정한콤비네이션차트결과 > 54/170

55 칼럼차트 type 을스택으로표현하는콤비네이션을원하다면 <ColumnSet type= stacked > 를 정의하십시오. < 그림 20 Colum2DnSet type="stacked" 설정한콤비네이션차트결과 > 실시간차트 실시간차트는주기적으로변하는데이터를그대로표현합니다. 차트는풀링방식으로데이터를얻도록설계되었습니다. 실시간차트는 <RealTimeChart/> 노드로시작과끝을지시합니다. 실시간차트의시리즈 (series) 속성으로는칼럼시리즈, 라인시리즈, Area 시리즈등을갖습니다. 그리고서버에서생성되는데이터를갖고오기위해주기적으로원격호출 (RPC, Remote Procedure Call) 이이루어집니다. 그역할을담당하는것이 HttpServiceRepeater 입니다. 실시간으로데이터를표현하기위해서반드시레이아웃에정의해야합니다. 실시간차트레이아웃을작성할때주의점은아래와같습니다. 첫째, HttpServiceRepeater 는반드시 <rmatechart/> 노드의자식위치에, 그리고 <RealTimeCartesianChart/> 의아래형제위치에놓여야합니다. 둘째, target 속성의속성값으로차트 ( 즉, 실시간차트 ) 의 id 값을지시하십시오. 셋째, HttpServiceRepeater 의 url 은차트데이터가있는 XML URL 경로입니다. 이 XML 데이터형식은반드시아래와같은구조로작성되어야합니다. <?xml version="1.0" encoding="utf-8"?> <items> //XML 의루트는반드시 items 로시작 <item> // 한개의데이터셋은반드시 item 으로묶여야합니다. <Time>13:8:27</Time> // 이곳은사용자정의하십시오. <Volume>5527</Volume> <Price>309</Price> </item> </items> 55/170

56 < 예제 31 실시간차트데이터양식 > 실시간차트를 HTML 문서에임베딩시차트초기의데이터를삽입할필요는없습니다. * 참고 : 예를들어차트가데이터를갱신하는주기가 5 초라고한다면, 차트는매 5 초마다서버에서풀링방식으로데이터를가져와표현합니다. 그러나실제적으로여러가지요인 ( 선로상태, 통신상태, 트래픽수등등 ) 에따라서버와의통신에서오차는발생할수있습니다. 서버사이드는이오차를고려하여차트가가져갈데이터를갱신할필요가있습니다. 실시간차트는두가지유형으로데이터를표현합니다. 1. 데이터개수를기준으로표현합니다. 서버나기타경로를통하여데이터를받으면차트는즉시 데이터를표현합니다. displaydatasize 의값을 20 으로설정하였다면한화면에 20 개의데이터를 표현한후다음데이터부터차례로화면을갱신하며데이터를출력합니다. 2. 시간을기준으로데이터를표현합니다. 예를들어 timeperiod 값을 3600 초 (1 시간 ) 으로설정하고 interval 값을 3 으로설정했다면매 3 초마다차트는 1 시간동안데이타를현재화면에출력하고 1 시간이후의다음데이터부터차례로화면을갱신하며데이터를출력합니다.(interval 값은 HttpServiceRepeater 의 interval 과같아야정상적입니다.) 데이터개수를기준으로실시간차트표현 (CategoryAxis 활용 ) 현재차트가표현하는데이터의개수를생각한다면 CategoryAxis 를활용하여차트레이아웃을작성하여야합니다. CategoryAxis 는연속적이지않고, 데이터의카테고리필드를개별적으로판단합니다. 예를들어데이터필드중시간이나날짜와관련된필드가있을때이것은형식상시간, 날짜이지만차트의카테고리축은그렇게판단하지않고단순문자열 (String) 로판단합니다. 연속적이지않기때문에중복데이터를그대로표현하는단점이있습니다. <rmatechart cornerradius="12" borderstyle="solid"> <RealTimeChart id="chart" datadisplaytype="datasize" displaydatasize="15" showdatatips="true"> <horizontalaxis> <CategoryAxis id="haxis" categoryfield="time"/> </horizontalaxis> <series> <Column2DSeries yfield="volume" displayname="trading Volume" itemrenderer="gradientcolumnitemrenderer"> <fill> // 채우기색정의 56/170

57 <SolidColor color="0xb0c759" /> </fill> </Column2DSeries> </series> </RealTimeChart> <HttpServiceRepeater url=" target="{chart}" interval="3" method="get" /> //3초단위로풀링방식으로데이터가져옴 </rmatechart> < 예제 32 CategoryAxis 활용한실시간차트예제 > 정해진시간을기준으로실시간차트표현 (DateTimeAxis 활용 ) 최근데이터를기준으로정해진시간동안들어온데이터를표현하고자할때 DateTimeAxis 를활용하여레이아웃을작성하십시오. DateTimeAxis 는연속적인시간을표현하기때문에반복적인데이터는무시합니다. 그래서어떠한오차로인해차트가서버의갱신된데이터를가져오지못했을경우즉, 이전의중복된데이터를가져왔을경우무시하게됩니다. 또한오차로인해다음데이터를얻지못하고다다음데이터를얻었을경우얻지못한데이터에대해그시간영역에해당되는공백을남겨표시합니다. 일반적인실시간차트는 DateTimeAxis 를활용하십시오. <rmatechart cornerradius="12" borderstyle="solid"> <RealTimeChart id="chart" datadisplaytype="time" timeperiod="60" interval="3" showdatatips="true"> //60초동안 3초간격으로데이터표현 ( 시간기준 ) <horizontalaxis> // 데이터와축라벨은모두초단위, 데이터가 3초단위로들어오므로 datainterval=3, 축라벨간격은 9( 초 ), GMT가아닌 Local시간표시 true <DateTimeAxis dataunits="seconds" labelunits="seconds" datainterval="3" interval="9" displaylocaltime="true"/> </horizontalaxis> <series> //DateTimeAxis 이므로 xfield 정의필수. <Column2DSeries xfield="time" yfield="volume" displayname="trading Volume" itemrenderer="gradientcolumnitemrenderer"> <fill> <SolidColor color="0xb0c759" /> </fill> </Column2DSeries> </series> </RealTimeChart> <HttpServiceRepeater url=" target="{chart}" interval="3" method="get" /> 57/170

58 </rmatechart> < 예제 33 DateTimeAxis 활용한실시간차트예제 > * 참고 : RealTimeChart 의 interval, DateTimeAxis 의 interval, HttpServiceRepeater 의 interval, 이 3 개 의 interval 을똑같이맞춤으로써원하는모양의차트가나옵니다. < 그림 21 Cateogory 축실시간차트 ( 좌 ), DateTime 축실시간차트 ( 우 )> HttpServiceRepeater 로일반차트의데이터를실시간으로바꾸기. HttpServiceRepeater 는반드시실시간차트에만국한적이지않습니다. 예를들어칼럼 3D 차트를생성하였습니다. 이때매 1 분마다칼럼 3D 차트의전체데이터를갱신하고자할때 HttpServiceRepeater 는유용합니다. 칼럼 3D 차트레이아웃을그대로활용하고아래와같이 HttpServiceRepeater 를레이아웃에넣어주시면됩니다. <rmatechart cornerradius="12" borderstyle="solid"> <Options> <Caption text="anual Report" /> </Options> <Column3DChart id="chart" showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month" /> </horizontalaxis> <series> <Column3DSeries yfield="profit" displayname="profit"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> 58/170

59 </series> </Column3DChart> </Column3DSeries> <HttpServiceRepeater url=" target="{chart}" interval="60"/> </rmatechart> < 예제 34 칼럼차트에 HttpServiceRepeater 적용 > 레이더 ( 방사형 ) 차트 레이더 ( 방사형 ) 차트는 <RadarChart/> 노드로시작과끝을지시합니다. 레이더차트의데이터표현을나타내는레이더라인즉, 차트시리즈는 <RadarSeries> 입니다. 레이더차트는 radialaxis 와 angularaxis 두개의축이존재합니다. radialaxis 는레이더차트원점에서테두리까지를잇는축으로각데이터의수치를표현하는역할을합니다. angularaxis 는레이더차트테두리에출력되는축으로레이더차트데이터의카테고리에해당되는데이터를표현합니다. 연간가계지출현황이라는데이터를갖고레이더차트로표현하기위해일단데이터를정의해보도록 하겠습니다. 다음은일반적인데이터를갖고차례로 XML, 배열형태로데이터를바꾼형태입니다. 1. 일반적인데이터 2005년 2006년 2007년 2008년 Food Health Care Transportation Clothing Education Shelter Leisure Others 일반적인데이터를배열형태로바꾼결과. var chartdata = [{"catname":"food", "year2005":100, "year2006":100, "year2007":180, "year2008":150},{"catname":"health Care", "year2005":80, "year2006":120, "year2007":200, "year2008":210},{"catname":"transportation", "year2005":70, "year2006":115, "year2007":100, "year2008":240} 59/170

60 ,{"catname":"clothing", "year2005":80, "year2006":120, "year2007":140, "year2008":210},{"catname":"education", "year2005":90, "year2006":160, "year2007":130, "year2008":200},{"catname":"shelter", "year2005":100, "year2006":180, "year2007":165, "year2008":140},{"catname":"leisure", "year2005":76, "year2006":120, "year2007":130, "year2008":170},{"catname":"others", "year2005":80, "year2006":140, "year2007":140, "year2008":190}]; 3. 일반적인데이터를 XML 형태로바꾼결과. <items> <item> <catname>food</catname> <year2005>100</year2005> <year2006>100</year2006> <year2007>180</year2007> <year2008>150</year2008> </item> <item> <catname>health Care</catName> <year2005>80</year2005> <year2006>120</year2006> <year2007>200</year2007> <year2008>210</year2008> </item>... <item> <catname>others</catname> <year2005>80</year2005> <year2006>140</year2006> <year2007>140</year2007> <year2008>190</year2008> </item> </items> 위데이터를바탕으로작성한레이더차트레이아웃예제입니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text=" 연도별가계지출품목분석 "/> <SubCaption text="(2005~2008)"/> <Legend usevisiblecheck="true"/> </Options> <RadarChart id="chart1" 60/170

61 isseriesonaxis="false" type="polygon" showalldatatips="false" showdatatips="true"> <radialaxisrenderers> <AxisRenderer horizontal="true" visible="true" stylename="hangingcategoryaxis" > </AxisRenderer> <AxisRenderer horizontal="false" visible="false" stylename="hangingcategoryaxis" > </AxisRenderer> </radialaxisrenderers> <radialaxis> <LinearAxis/> </radialaxis> <angularaxis> <CategoryAxis id="aaxis" categoryfield="catname" displayname="category" /> </angularaxis> <angularaxisrenderers> <AngularAxisRenderer axis="{aaxis}" axistitlestylename="axistitle" stylename="hangingcategoryaxis"/> </angularaxisrenderers> <series> <RadarSeries field="year2005" displayname="2005년 "> <showdataeffect> <SeriesInterpolate/> </showdataeffect> <stroke> <!-- 데이터포인트에찍힌도형의외곽테두리선스타일 --> <Stroke color="0xe48701" weight="2"/> </stroke> <linestroke> <!-- 레이더라인스타일 --> <Stroke color="0xe48701" weight="2"/> </linestroke> <areafill> <!-- 레이더안쪽영역채우기색 --> <SolidColor color="0xe48701" alpha="0.1"/> </areafill> <fill> <!-- 데이터포인트에찍힌도형의안쪽채우기색 --> <SolidColor color="0xffffff"/> </fill> </RadarSeries> <RadarSeries field="year2006" displayname="2006 년 "> <showdataeffect> 61/170

62 <SeriesInterpolate/> </showdataeffect> <stroke> <Stroke color="0xb0c759" weight="2"/> </stroke> <linestroke> <Stroke color="0xb0c759" weight="2"/> </linestroke> <areafill> <SolidColor color="0xb0c759" alpha="0.1"/> </areafill> <fill> <SolidColor color="0xffffff"/> </fill> </RadarSeries> <RadarSeries field="year2007" displayname="2007년 "> <showdataeffect> <SeriesInterpolate/> </showdataeffect> <stroke> <Stroke color="0x0a80c4" weight="2"/> </stroke> <linestroke> <Stroke color="0x0a80c4" weight="2"/> </linestroke> <areafill> <SolidColor color="0x0a80c4" alpha="0.1"/> </areafill> <fill> <SolidColor color="0xffffff"/> </fill> </RadarSeries> <RadarSeries field="year2008" displayname="2008년 "> <showdataeffect> <SeriesInterpolate/> </showdataeffect> <stroke> <Stroke color="0xcc99cc" weight="2"/> </stroke> <linestroke> <Stroke color="0xcc99cc" weight="2"/> </linestroke> 62/170

63 <areafill> <SolidColor color="0xcc99cc" alpha="0.1"/> </areafill> <fill> <SolidColor color="0xffffff"/> </fill> </RadarSeries> </series> </RadarChart> </rmatechart> < 예제 35 레이더차트레이아웃 > 정의한데이터와위레이아웃으로출력한차트는다음과같습니다. < 그림 22 레이더차트출력화면 > 목표대비실적차트. 목표대비실적차트는목표치와달성치두데이터를표현하는차트로 2D 리니어유형과 3D 실린더유형이있습니다. 목표대비실적차트는 2D 의경우 <Combination2DChart/> 노드로, 3D 의경우 <Combination3DChart/> 노드로, 차트의시작과끝을지시합니다. 목표대비실적차트시리즈 (series) 속성값으로는단 2 개의시리즈만넣을수있습니다. 목표에해당되는시리즈와, 실적에해당되는시리즈입니다. 기본적으로모든속성은 Cartesian 공통속성과같습니다. 이에대한설명은 < 예제 13 Cartesian 차트의공통적인속성설명 > 을참고하십시오. 63/170

64 시리즈를정의할때반드시지켜야할점은실적에해당되는시리즈를먼저정의한후목표에해당되 는시리즈를정의해야합니다. 2D Linear Type 3D Cylinder Type 3D Cylinder-Bar Type 차트노드 Combination2DChart Combination3DChart Combination3DChart 실적에해당되는시리즈노드목표에해당되는시리즈노드 Target2DResultSeries Target3DResultSeries HTarget3DResultSeries Target2DGoalSeries Target3DGoalSeries HTarget3DResultSeries < 표 8 목표대비실적차트노드정의표 > 아래는 2D 목표대비실적차트레이아웃예제입니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text=" 목표대비실적차트 "/> <SubCaption text="linear Type"/> </Options> <Combination2DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month" /> </horizontalaxis> <series> <!-- 실적에해당필히순서준수--> <Target2DResultSeries yfield="result" displayname="result"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Target2DResultSeries> <!-- 목표에해당 --> <Target2DGoalSeries yfield="goal" displayname="goal"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Target2DGoalSeries> </series> </Combination2DChart> </rmatechart> < 예제 36 2D 목표대비실적차트 (Linear Type) 레이아웃예제 > 64/170

65 3D 실린더형목표대비실적차트레이아웃은위 2D 목표대비실적차트레이아웃에서 2D 라는글자 를 3D 라는글자로바꿔주기만하면됩니다. 목표대비실적차트출력모습은다음과같습니다. < 그림 23 목표대비실적차트출력결과 (2D, 3D)> 스크롤차트 스크롤차트는데이터양이많은경우지정된데이터개수만을표시하고다음또는이전데이터는스크롤을통해데이터를표시하게끔하는차트입니다. 스크롤차트는현재 2D 차트에한해지원하고있습니다. 스크롤차트를생성하기위해서는기존 2D 차트레이아웃에서 <ScrollableAxisRenderer/> 와 <CategoryLinearAxis/> 를추가작성할필요가있습니다. CategoryLinearAxis 는 LinearAxis 를상속받아만든클래스으므로 LinearAxis 의모든속성을상속받았습 니다. 스크롤차트레이아웃을작성하기위해다음단계를차례로밟으십시오. 기존 2D 차트레이아웃작성법대로레이아웃을작성합니다. 예를들어칼럼 2D 차트를스크롤가능한차트로만들어보겠습니다. 칼럼차트는스크롤방향이가로방향이므로가로축 (horizontalaxis) 속성에 CategoryLinearAxis 를 value 로할당합니다.( 바차트의경우엔세로축속성에할당 ) 가로축렌더러 (horizontalaxisrenderers) 속성값으로 ScrollableAxisRenderer 를할당합니다. 위방법처럼기존차트를스크롤차트로변경하는방법은해당축과해댱축렌더러에할당하는값을조 금만수정하면됩니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text=" 스크롤 2D 칼럼차트 "/> </Options> <Column2DChart showdatatips="true" gutterright="10"> <series> <Column2DSeries id="cs1" yfield="data1" displayname="data1" itemrenderer=" 65/170

66 SemiCircleColumnItemRenderer"/> </series> <horizontalaxis> <CategoryLinearAxis id="haxis" categoryfield="gu"/> </horizontalaxis> <horizontalaxisrenderers> <ScrollableAxisRenderer axis="{haxis}" visibleitemsize="10" scrollsensitivity="10"/> </horizontalaxisrenderers> </Column2DChart> </rmatechart> < 예제 37 스크롤 2D 칼럼차트예제 > < 그림 24 스크롤 2D 칼럼차트출력모습 > 스크롤이미지 CSS 적용시키기. 스크롤차트에서스크롤에해당되는이미지는 HTML 의 CSS 에서적용합니다. <style> /* 스크롤바전체 Div */.rmatecharth5 ScrollBar { border : 1px solid #78CBDF; } /* 수평스크롤바트랙 Div */.rmatecharth5 HScrollTrack { background : url('./assets/h_scroll_track.png') repeat-x; } 66/170

67 /* 수평스크롤바썸 Div */.rmatecharth5 HScrollThumb { background:url('./assets/h_scroll_thumb.png') repeat-x; border : 1px solid #78CBDF; cursor : pointer; } /* 수평스크롤바썸 Div - hover */.rmatecharth5 HScrollThumb:hover{ background:url('./assets/h_scroll_thumb_hover.png') repeat-x; } /* 수평스크롤바오른쪽화살표 Div */.rmatecharth5 HScrollUpArrow { background:url('./assets/right_scroll_arrow.png') no-repeat; cursor : pointer; } /* 수평스크롤바왼쪽화살표 Div */.rmatecharth5 HScrollDownArrow { background:url('./assets/left_scroll_arrow.png') no-repeat; cursor : pointer; } /* 수직스크롤트랙 Div */.rmatecharth5 VScrollTrack { background : url('./assets/v_scroll_track.png') repeat-y; }.rmatecharth5 VScrollThumb { background:url('./assets/v_scroll_thumb.png') repeat-y; border : 1px solid #78CBDF; cursor : pointer; }.rmatecharth5 VScrollThumb:hover{ background:url('./assets/v_scroll_thumb_hover.png') repeat-y; 67/170

68 }.rmatecharth5 VScrollUpArrow { background:url('./assets/up_scroll_arrow.png') no-repeat; cursor : pointer; }.rmatecharth5 VScrollDownArrow { background:url('./assets/down_scroll_arrow.png') no-repeat; cursor : pointer; } </style> 브로큰축 (Broken Axis) 차트 브로큰축차트는데이터간의값편차가심할경우사용합니다. 예를들어대부분의데이터가 3000미만인데특정데이터는 10만이넘어가는데이터와같은경우차트는이를모두표현하기위하여 y축에대한값을 10만을넘는값을설정하게됩니다. 이로인하여 3000미만의데이터들의변동에대한것을한눈에알아볼수없습니다. 일반차트 ( 데이터 3000 미만과 10 만의데이터 ) 브로큰축차트 ( 데이터 3000 미만과 10 만의데이터 ) < 그림 25 브로큰축차트출력모습 > 브로큰축차트는위와같은데이터값편차가클경우사용하면데이터변동에대한것을한눈에보기 좋게됩니다. 브로큰축차트레이아웃은아래와같이설정합니다. <?xml version="1.0" encoding="utf-8"?> <rmatechart backgroundcolor="0xffffff" borderstyle="solid" cornerradius="5"> 68/170

69 <Options> <Caption text="anual Report"/> </Options> <Column2DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month"/> </horizontalaxis> <verticalaxis> <!-- BrokenAxis를설정하시려면해당축이설정될곳에 BrokenAxis를설정하십시오. --> <BrokenAxis id="vaxis" brokenminimum="3000" brokenmaximum="110000" brokenratio="0.8"/> <!-- brokenminimum - Broken축이시작될값입니다. --> <!-- brokenmaximum - Broken축이끝날값입니다. --> <!-- brokenratio - Broken축이그려질위치값입니다. 0 ~ 1이유효값이며 0에가까울수록축의최소값에 --> <!-- 가까워지며 1에가까워질수록축의최대값에가까워집니다. --> </verticalaxis> <verticalaxisrenderers> <BrokenAxis2DRenderer axis="{vaxis}"/> <!-- BrokenAxis를사용할경우에 BrokenAxis2DRenderer를설정합니다. --> <!-- 이외의렌더러를설정할경우올바르게표현이되지않습니다. --> </verticalaxisrenderers> <series> <Column2DSeries yfield="profit" displayname="profit"> <showdataeffect> <SeriesInterpolate/> </showdataeffect> </Column2DSeries> </series> <annotationelements> <CrossRangeZoomer enablezooming="false"/> <!-- BrokenAxis는확대 / 축소를지원하지않습니다. --> </annotationelements> </Column2DChart> </rmatechart> < 예제 38 브로큰축차트예제 > 주의사항 브로큰축차트는 Line,Area,Column,Bar 차트이외의차트는지원하지않습니다. 브로큰축차트는 CrossRangeZoomer 의확대 / 축소, HistoryChart 를지원하지않습니다 히스토리차트 히스토리차트의기본적인사상은스크롤차트와같습니다. 그러나히스토리차트는더많은데이터의경 69/170

70 우전체데이터의흐름을나타내는네비게이터 ( 또는 overview) 가있어특정데이터영역을자유롭게넘나들며특정데이터의개수가아닌유동적으로데이터의개수를사용자가조정하여표현할수있습니다. 히스토리차트는 <HistoryChart/> 노드로시작과끝을지시합니다. 히스토리차트의구성은디스플레이어, 네비게이터, 설렉터로구성되어있습니다. 디스플레이어 (displayer) 디스플레이어차트는사용자가선택된영역만이표시하는차트입니다. 실제로사용자가보고자 하는부분의데이터를표시합니다. 네비게이터 (navigator) 네비게이터는전체데이터를표현하여데이터의흐름을전체적으로볼수있습니다. 이는곧오 버뷰역할을합니다. 설렉터 (selector) 설렉터는네비게이터에서사용자가특정영역을선택하게끔하는역할을합니다. 셀렉터에서선 택된영역이곧디스플레이어차트에표현됩니다. 디스플레이어차트 네비게이터 설렉터 < 그림 26 히스토리차트구성도 > HistoryChart 의속성및유효값설명에대한표입니다. 속성명 유효값 설명 displayerchart Displayer 히스토리차트의디스플레이어차트를정의합니다. navigator Navigator 네비게이터를정의합니다. selector HistoryRangeSelector 설렉터를정의합니다. 70/170

71 < 표 9 히스토리차트속성및유효값설명 > <HistoryChart/> 의속성으로각각 displayerchart 와 navigator 의유효값인 Displayer 와 Navigator 는각각히스토리에서만적용되는차트입니다. Displayer 는 Cartesian 공통속성을모두갖고있으며 Navigator 는 Area2DChart 의모든속성을갖고있습니다. 히스토리차트레이아웃작성예입니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text=" 히스토리 2D 차트 "/> </Options> <HistoryChart> <displayerchart> <!-- 디스플레이차트정의 --> <Displayer id="chart1" showdatatips="true" width="100%" height="100%"> <horizontalaxis> <CategoryAxis id="mainhaxis" categoryfield="date"/> </horizontalaxis> <series> <Column2DSeries id="columnseries" yfield="data1" fill="0xb0c759" displayname="data1"> <showdataeffect> <SeriesInterpolate duration="1000"/> </showdataeffect> </Column2DSeries> </series> </Displayer> </displayerchart> <navigator> <Navigator id="navi" width="100%" height="100"> <horizontalaxis> <CategoryAxis categoryfield="date" id="navihaxis"/> </horizontalaxis> <horizontalaxisrenderers> <AxisRenderer axis="{navihaxis}" visible="false"/> </horizontalaxisrenderers> <verticalaxis> <LinearAxis id="vaxis"/> </verticalaxis> <verticalaxisrenderers> <AxisRenderer axis="{vaxis}" visible="false"/> </verticalaxisrenderers> 71/170

72 <backgroundelements> <GridLines direction="horizontal"/> </backgroundelements> <series> <Area2DSeries name="a" yfield="data1"/> </series> </Navigator> </navigator> <selector><!-- 시작시보여지는차트는총데이터의약 30% 이며센터영역입니다. --> <HistoryRangeSelector width="100%" startingrange="center" visibleitemsize="30"/> </selector> </HistoryChart> </rmatechart> < 예제 39 히스토리차트레이아웃예제 > < 그림 27 히스토리차트출력모습 > 히스토리차트의네비게이터의손잡이 (Thumb) 이미지 CSS 적용시키기 히스토리차트의네비게이터에해당되는이미지는 HTML 의 CSS 에서적용합니다. <style> /* 히스토리차트범위선택 Thumb */.rmatecharth5 ChartRangeSelector_Thumb { background:url('./assets/selector.png') no-repeat; } </style> 72/170

73 6.21. From-To 차트 From-To 차트는칼럼차트계열과바차트계열에시작점데이터와끝점데이터를삽입하여데이터영역을표현하는차트입니다. 이데이터영역을활용하여 waterfall 차트, step 차트생성이가능합니다. 칼럼시리즈 (Column2DSeries, Column3DSeries) 와바시리즈 (Bar2DSeries, Bar3DSeries) 그리고영역시리즈 (Area2DSeries) 의추가속성으로 minfield 가시작점데이터에해당됩니다. From-To 차트의모든속성은각각칼럼, 바, 영역차트와동일합니다. 이를활용하여칼럼 2D 차트로 waterfall 차트를생성해보도록하겠습니다. 먼저 minfield 에해당하는수치필드를포함한데이터를정의합니다. 배열형태로정의하면아래와같습니다. var data= [ {"cat":"1월", "from":1000, "to":5000}, {"cat":"2월", "from":5000, "to":12000}, {"cat":"3월", "from":12000, "to":16000}, {"cat":"4월","from":16000, "to":10000}, {"cat":"5월", "from":10000, "to":100}, {"cat":"6월", "from":100, "to":-1000}, {"cat":"7월", "from":-1000, "to":3000}, {"cat":"8월", "from":3000, "to":8000}, {"cat":"9월", "from":8000, "to":12000}, {"cat":"10월", "from":12000, "to":14000}, {"cat":"11월", "from":14000, "to":7500}, {"cat":"12월", "from":7500, "to":2500}, {"cat":" 내년목표 ", "from":0, "to":20000} ]; < 예제 40 From-To 차트데이터정의예제 > 위데이터는한해매출증감을나타낸예시데이터입니다. 이데이터를차트로표현하기위해작성된레이아웃은아래와같습니다. <rmatechart backgroundcolor='0xffffee' cornerradius='12' borderstyle='solid'> <Options> <Caption text='2009 월별매출액증감비교 (Waterfall)'/> <SubCaption text=' 단위 : 만원 ' textalign='right' fontsize='11' paddingright='20'/> </Options> <NumberFormatter id='fmt'/> 73/170

74 <Column2DChart showdatatips='true' datatipjsfunction='datatipfunc' fontsize='11'> <horizontalaxis> <CategoryAxis categoryfield='cat'/> </horizontalaxis> <verticalaxis> <LinearAxis formatter='{fmt}'/> </verticalaxis> <series> <Column2DSeries id='series1' minfield='from' yfield='to' filljsfunction='fillfunc' itemrenderer='boxitemrenderer'> <showdataeffect> <SeriesSlide direction='up' duration='1000'/> </showdataeffect> <stroke> <Stroke weight='1' color='0x999999' alpha='0.7'/> </stroke> </Column2DSeries> </series> </Column2DChart> </rmatechart> < 예제 41 From-To 차트레이아웃예제 > 위레이아웃예제에서 minfield 속성에데이터의 from 필드를삽입한것을볼수있습니다. 따라서 from 필드는시리즈아이템들의시작점이됩니다. 또한 filljsfunction 과 datatipjsfunction 을정의하여데이터팁과채우기색을사용자정의한것을볼수있습니다. 데이터팁과채우기색의사용자정의함수에대한설명은 7.9 사용자정의함수설정하기 를참고하십시오. 위예제를출력한결과는아래와같습니다. < 그림 28 From-To 차트 (waterfall) 출력화면 > 74/170

75 6.22. 매트릭스차트 매트릭스차트는 x,y 값으로위치를정하고 z 값으로크기를정하여표현하는차트입니다. 매트릭스차트의표현유형으로는아래와같습니다. 매트릭스차트의 유형 (type) 설명 예제모습 renderer x,y 로위치를잡고 z 로도형크기를정하여 표현합니다. image x,y 로위치를잡고 z 로이미지크기를정하여 표현합니다. fill x,y 로위치를잡으며 z 값은무시되어해당 칸을색채움으로표시합니다. plot x,y 로위치를잡으며 z 값은무시되어해당칸에 plot 형태로표현합니다. < 표 10 매트릭스차트의유형표 > 매트릭스차트유형을결정하는방법은아래와같습니다. <Matrix2DChart showdatatips="true" type="renderer" selectionmode="single"> Matrix2DChart 의속성으로는아래와같습니다. 속성명유효값설명 type drawtype renderer, image, fill, plot (default : renderer) radius, area (default : radius) 매트릭스가그려질때의표현방법입니다. 매트릭스차트가그려질때어떤기준으로그릴지정합니다. radius : 반지름기준, area : 면적기준 75/170

76 < 표 11 매트릭스차트속성표 > ( fill, plot 은무시됩니다 ) Matrix2DChart 의 type 이 renderer, image 일때어떤기준으로그릴지정하는방법은아래와같습니다. <Matrix2DChart showdatatips="true" type="renderer" drawtype= radius selectionmode="single"> 아래그림은 drawtype= radius 와 area 의비교모습입니다. drawtype = radius drawtype = area 매트릭스차트의기본도형 ( renderer ) 을변경하고싶으시다면아래와같이하십시오. <Matrix2DSeries.. renderer= circle // renderer= star..> 매트릭스차트를이미지로표현하고싶으시다면 imagesource 에해당이미지주소를넣어주십시오. <Matrix2DSeries.. imagesource=./images/icon1.png..> 위속성들을변경후의모습입니다. 76/170

77 renderer 변경 이미지 이미지차트 이미지차트는칼럼형태의차트를특정이미지로표현하는차트입니다. 이미지차트의유형을결정하는 요소는크게두가지로나뉩니다. 첫째, 이미지고유의비율에따라이미지를표현할지의여부 둘째, 데이터하나를표현할때단일이미지또는다중이미지를사용할지의여부 위두가지옵션에따라결정되는이미지차트의유형은아래와같습니다. 이미지차트유형 (imagedisplaytype) 이미지고유비율 (true,false) 설명 예제모습 데이터를단일이미지로표현하되 True( 정비율 ) 이미지고유사이즈유지, 남는여백은막대를세웁니다. single 데이터를단일이미지로표현하되 False( 차등비율 ) 이미지고유사이즈가아닌차트가결정한사이즈대로 표현합니다. 데이터를단일이미지로표현하되 singlerepeat True( 정비율 ) 이미지고유사이즈유지, 남는여백은이미지의반복으로처리 False( 차등비율 ) multiple True( 정비율 ) singlerepeat 유형에서의차등비율은존재하지않습니다. Multiple 유형에서의차등비율은존재하지않습니다. X X 77/170

78 False( 차등비율 ) 데이터를다중이미지로표현합니다. 각각의이미지는고유값을갖습니다. 이값은차트의사이즈에의해계산되어이미지로전달됩니다. < 표 12 이미지차트유형표 > 기본적으로이미지차트의모든속성은칼럼차트와동일합니다. 이미지차트고유속성은이미지시리즈 의 imgsource 입니다. imgsource 속성은이미지의경로와어떻게표현할지를결정하는속성입니다. <ImageSeries yfield="data1" imagedisplaytype="singlerepeat" displayname=" 분양수 " stylename="seriesstyle" formatter="{numfmt}"> <imgsource> <ImageSourceItem url="../samples/images/10000.png"/> </imgsource> <showdataeffect> <SeriesSlide duration="1000" direction="up"/> </showdataeffect> </ImageSeries> 위예제는단일시리즈를정의한것입니다. imagedisplaytype 을 singlerepeat 로설정하여하나의이미지를반복적으로처리하도록하였습니다. 그리고 imgsource 노드에서이미지의경로를정의합니다. imgsource 노드의자식노드로설정가능한유효값은 ImageSourceItem 노드입니다. ImageSourceItem 노드는이미지의경로와이미지를정비율로표현할지여부를나타냅니다. 속성명유효값설명 maintainaspectratio True false( 기본값 : true) 이미지고유비율대로표현할지여부 url 이미지주소 (URL) 이미지파일의주소입니다. Value Number 이미지가갖을고유 value 입니다.(multiple 에 서만해당됩니다.) < 표 13 이미지차트 ImageSourceItem 속성설명 > 3 개의이미지가각각고유값을갖는 multiple 이미지차트레이아웃을작성하면아래와같습니다. <ImageChart id="chart" showdatatips="true" gutterleft="20" gutterright="20" showlabelvertically="true"> <! X축정의 --> <horizontalaxis> <CategoryAxis id="haxis" categoryfield="region"/> 78/170

79 </horizontalaxis> <! Y축정의 --> <verticalaxis> <LinearAxis id="vaxis"/> </verticalaxis> <series> <! 단일이미지시리즈정의 --> <ImageSeries yfield="data1" imagedisplaytype="multiple" stylename="seriesstyle" formatter="{numfmt}"> <imgsource> value="100"/> <! value 100 을갖는첫번째이미지 --> <ImageSourceItem maintainaspectratio="false" url="../samples/images/3-1.png" value="200"/> <! value 200 을갖는두번째이미지 --> <ImageSourceItem maintainaspectratio="false" url="../samples/images/3-2.png" value="300"/> <! value 300 을갖는세번째이미지 --> <ImageSourceItem maintainaspectratio="false" url="../samples/images/3-3.png" </imgsource> </ImageSeries> </series> <horizontalaxisrenderers> <AxisRenderer axis="{haxis}" fontsize="11"/> </horizontalaxisrenderers> <! Y 축은 visible off --> <verticalaxisrenderers> <AxisRenderer axis="{vaxis}" visible="false" includeinlayout="false"/> </verticalaxisrenderers> </ImageChart> 위레이아웃을실행한모습은아래와같습니다. 79/170

80 < 그림 29 이미지차트실행화면 > 윙차트 윙차트는기존차트와는달리양옆혹은위아래로출력되는형태의차트입니다. 예를들어해당차트는 특정제품에대하여여성이용자와남성이용자의구매현황같은것을시각적으로보기쉽게표현하는 차트입니다. 현재윙차트에는두가지의형태만존재합니다. 해당형태는 Column 과 Bar 형두가지만존재합니다. Bar 형태 Column 형태 위그림들을살펴보시면양옆, 위아래로해당월에대한값들을한눈에비교해보실수있습니다. 윙차트의컬럼형태를출력하고싶으시다면레이아웃을아래와같이작성하십시오. <?xml version="1.0" encoding="utf-8"?> <rmatechart backgroundcolor="0xffffff" borderstyle="solid" cornerradius="5"> <Options> <Caption text="anual Report"/> </Options> <!-- 윙컬럼 2D 차트를생성하실경우에는 Column2DWingChart를정의하십시오. --> <Column2DWingChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month"/> 80/170

81 </horizontalaxis> <series> <!-- Column2DWingChart의 series속성으로는 Column2DWingSeries를설정하여야합니다. --> <!-- 일반 Column2D,3DChart에서는데이터필드로 yfield만존재하였지만 Wing Chart에서는--> <!-- yfieldopp란데이터필드가존재하므로해당데이터필드도설정해주셔야합니다. --> <!-- yfield는위쪽영역, yfieldopp는아래쪽영역입니다. --> <Column2DWingSeries yfield="profit" yfieldopp="cost" labelposition="inside"> <showdataeffect> <WingSeriesInterpolate/> </showdataeffect> </Column2DWingSeries> </series> </Column2DWingChart> </rmatechart> 위와같이작성하시면윙차트의 Column 형태를출력하실수있습니다 실시간 - 프리미엄차트 실시간 - 프리미엄차트는 6.15 실시간차트를업그레이드한차트입니다. 기본적으로실시간차트와비교 하여통신방법에의한변화는없습니다. HTTPService 를통하여 RPC 요청을하고응답으로차트에표현 하게됩니다. 그러나실시간 - 프리미엄차트만의특징은아래와같습니다. 1. 차트에표현되는시리즈각각에해당 URL 을통하여주기를다르게표현할수있습니다. 예를들어 3 개의시리즈에각각 5 초, 10 초, 1 분단위로개별주기를줄수있습니다. 2. 기존실시간차트는오른쪽방향에서왼쪽방향으로특정시간 ( 또는데이터량 ) 만큼출력을한반면실시간-프리미엄차트는왼쪽에서오른쪽방향으로서버사이드에서결장한시간범위만큼출력할수있습니다. 개별시리즈의주기가다르므로개별시리즈가표현될시간범위를개별적으로줄수있습니다. 3. 초기데이터를클라이언트의차트에표현해야할경우차트가로딩완료된시점에초기데이터를받아와출력할수있습니다. 4. 실시간-프리미엄차트의 X 축정의는항상 DateTimeAxis 로정의하여야합니다. 즉, 기존실시간차트의데이터량만큼출력시키는 CategoryAxis 는지원하지않습니다. 실시간-프리미엄차트를생성하기위해서는기존실시간차트처럼 <RealTimeChart/> 노드로레이아웃을작성하지않습니다. 실시간-프리미엄차트는어떤종류의 rmate 차트도가능합니다. 단, 실시간-프리미엄차트를가능케하는 <HttpMultiServiceRepeater /> 노드를차트아래에정의하여야합니다. HttpMultiServiceRepeater 는원격호출할오퍼레이션들을갖습니다. 이오퍼레이션은시리즈개수만큼정의되어각주기마다 RPC 요청하여응답으로해당시리즈에값을넘겨출력하게끔합니다. 81/170

82 HttpMultiServiceRepeater 노드의속성에대한설명과유효값은아래와같습니다. 속성명 유효값 설명 baseurl URL 주소 RPCItem 속성 url 의기본 URL에해당됩니다. 즉, RPCItem 의 url 은 baseurl + RPCItem의 url 이됩니다. method get post ( 기본값 :get) HTTP 프로토콜메소드입니다. Get방식인지 Post 방식인지를결정. requesttimeout Second( 초 ) 요청후응답대기시간입니다. targetcontroller 차트 id RPCItem 의 target 의컨트롤러에해당됩니다. 즉, 언제나차트가됩니다. showerrormessage true false( 기본값 :true) RPC 요청시실패또는에러발생시 Alert 메시지창을띄울지를나타냅니다. 만약 showerrormessage 속성을 false 로설정한다면어떤메시지도출력하지않습니다. < 표 14 HttpMultiServiceRepeater 속성및유효값설명표 > 다음은 HttpMultiServiceRepeater 노드의 RPCList 값에해당되는 RPCItem 노드의속성및유효값에대한 설명입니다. 속성명유효값설명 name String url String method get post ( 기본값 :get) target 시리즈의 id interval Seconds( 초 ) RPCItem 의 name 입니다. 반드시정의하십시오.( 임의의스트링 ) RPCItem 속성 url 의기본 URL에해당됩니다. 즉, RPCItem 의 url 은 baseurl + RPCItem의 url 이됩니다. HTTP 프로토콜메소드입니다. Get방식인지 Post 방식인지를결정합니다. RPCItem 해당 url 로요청하여받은데이터를표현할시리즈를나타냅니다. 각각의 RPCItem 은각각의시리즈가됩니다 RPC 요청주기를나타냅니다. 최초차트로딩시요청을보내고주어진 interval 간격으로다음요청이이루어집니다. 예를들어 5로설정한경우 5초간격으로요청을하게됩니다. Interval을설정하지않은경우주기적으로요청이이루어지지않습니다. 이런경우는비교데이터즉, 갱신만하고자할때 82/170

83 사용합니다. multiple single last( 기 concurrency 본값 :multiple) retrycount Number( 기본값 :30) HTTP 동일서비스발생시처리방법을나타냅니다. multiple : 기존요구을취소하지않고모든요청을보냅니다. single : 한번에 1개의요청만가능합니다. 중복발생시에러 Alert 메시지를띄웁니다. last : 기존의요청을모두취소하고, 마지막요청만을보냅니다. RPC 요청시실패응답이온경우재시도횟수를나타냅니다. < 표 15 RPCItem 노드속성및유효값설명표 > 예로컴비네이션 2D 차트를통하여실시간 - 프리미엄차트를생성해보겠습니다. <rmatechart backgroundcolor="0xffffff" cornerradius="12" borderstyle="solid"> <Options> <Caption text=" 다른주기를갖는데이터실시간표현 "/> <SubCaption text=" 본샘플은랜덤데이터입니다." textalign="right" fontsize="11"/> <Legend fontsize="11" usevisiblecheck="true"/> </Options> // 각종포메터정의 <DateFormatter id="dateorgfmt" formatstring="yyyy/mm/dd HH:NN:SS"/> <DateFormatter id="datefmt" formatstring="hh:nn:ss"/> <DateFormatter id="datefmt2" formatstring="hh:nn"/> <NumberFormatter id="numfmt"/> // 칼럼시리즈와라인시리즈 2 개를갖는컴비네이션 2D 차트생성 <Combination2DChart id="chart" showdatatips="true" datatipmode="multiple"> <series> <!-- 5 초주기라인시리즈 --> <Line2DSeries id="lineseries" xfield="date" yfield="data5" displayname="data(5 Sec)"> <linestroke> <Stroke color="0xff6666" weight="2" alpha="1"/> </linestroke> <horizontalaxis> <DateTimeAxis id="haxis2" displaylocaltime="true" labelunits="minutes" dataunits="seconds" interval="1" formatter="{dateorgfmt}" displayname="time"/> </horizontalaxis> 83/170

84 <verticalaxis> <LinearAxis id="vaxis2" minimum="0" maximum="150"/> </verticalaxis> </Line2DSeries> <!-- 3 초주기라인시리즈 --> <Line2DSeries id="lineseries2" xfield="date" yfield="data3" displayname="data(3 Sec)" verticalaxis="{vaxis2}" horizontalaxis="{haxis2}"> <linestroke> <Stroke color="0x339966" weight="1" alpha="1"/> </linestroke> </Line2DSeries> <!-- 누적량 --> <Column2DSeries id="columnseries" xfield="date" yfield="data60" displayname=" 누적량 " itemrenderer="boxitemrenderer"> <horizontalaxis> <DateTimeAxis id="haxis" displaylocaltime="true" labelunits="hours" dataunits="minutes" interval="3" datainterval="10" formatter="{dateorgfmt}" displayname="time"/> </horizontalaxis> <verticalaxis> <LinearAxis id="vaxis" minimum="0" maximum="999"/> </verticalaxis> <fill> <SolidColor color="0x6666ff"/> </fill> </Column2DSeries> </series> <horizontalaxisrenderers> <AxisRenderer axis="{haxis}" placement="bottom" formatter="{datefmt2}" ticklength="30" minorticklength="0" tickplacement="inside" showline="false"> <axisstroke> <Stroke weight="1" color="0x999999"/> </axisstroke> <tickstroke> <Stroke weight="1" color="0x6666ff" alpha="0.5"/> </tickstroke> </AxisRenderer> <AxisRenderer axis="{haxis2}" placement="bottom" formatter="{datefmt}"> <axisstroke> <Stroke weight="1" color="0x999999"/> </axisstroke> </AxisRenderer> 84/170

85 </horizontalaxisrenderers> <verticalaxisrenderers> <AxisRenderer axis="{vaxis}" placement="right" formatter="{numfmt}"/> <AxisRenderer axis="{vaxis2}" placement="left" formatter="{numfmt}"/> </verticalaxisrenderers> </Combination2DChart> // 실시간-프리미엄차트생성을위한 HttpMultiServiceRepeater 정의. <HttpMultiServiceRepeater baseurl=" targetcontroller="{chart}" requesttimeout="30"> <RPCList> <RPCItem name="rpc1" url="data3interval.jsp" target="{lineseries2}" interval="3" concurrency="last" retrycount="30"/> <RPCItem name="rpc2" url="data5interval.jsp" target="{lineseries}" interval="5" concurrency="last" retrycount="30"/> <RPCItem name="rpc3" url="data23tocurrent2.jsp" target="{columnseries}" interval="600" concurrency="last" retrycount="30"/> </RPCList> </HttpMultiServiceRepeater> </rmatechart> < 예제 42 실시간-프리미엄차트레이아웃예제 > 위샘플은라인 2 개와칼럼을실시간으로표현합니다. 각각의주기는 3 초, 5 초, 10 분입니다. 처음차트구동시초기데이터를위해 RPC 호출을하여출력한후주기마다반복적으로 RPC 호출을하여데이터를표현합니다. 라인차트 2 개의초기데이터는없는상태 ( 서버사이드에서이와같이작업함 ) 로차트가구동시부터 10 분영역의데이터를실시간으로뿌린후 10 분이지나면뿌려진데이터를모두삭제하고다시 10 분영역의데이터를각주기간격으로출력합니다. 아래칼럼차트는 10 분동안쌓여진데이터의누적량을표현하는예제로 10 분마다 RPC 호출하여칼럼하나씩을더하게됩니다. 칼럼차트의경우설정된알람시간 ( 매일 23 시 59 분 ) 이되면출력된데이터를모두갱신하게됩니다 각서버스크립트예제파일은제공된시디의다음폴더경로에서확인해볼수있습니다. 시디 /Samples/RealtimeServerSamples/ 위예제를위한서버사이드샘플을살펴보도록하겠습니다. 리얼타임차트서버사이드예제. 85/170

86 예제작동방식설명 // 본예제는 DB 데이터가아닌임의의랜덤데이터를기반으로합니다. requestalldata = true 인경우현재시 (hour):00 부터현재시 : 분까지 5초간격데이터를생성합니다. requestalldata = false 인경우현재시 : 분에해당하는데이터하나를생성하게됩니다. 차트레이아웃에서 <RPCItem> 의속성으로 interval 을 5로주어 5초마다하나의데이터를서버에서가져와기존데이터와 adding 을하게됩니다. <nextinitdate> 값에설정된시간이되면모든데이터를삭제하고다시요청하게됩니다.(refresh) 아래 URL 을각각복사하여브라우저에출력해보십시오 파라메터설명 requestalldata : 차트가모든데이터를요청하는플래그입니다. 즉, 현재차트에뿌려진데이터를갱신하고자할때사용합니다. requestalldata=true 로설정되어호출하는순간은다음과같습니다. 1. 처음차트가로딩되어처음 RPC 요청할때. 2. 현재시간이 <nextinitdate> 시간을넘은경우 true 로설정되어 RPC 요청합니다. requestalldata=true 로설정된경우서버사이드는다음과같이작업을할필요가있습니다. 이는요청후응답으로받은데이터가정확하다는서로간의통신법입니다. <infomsg> 태그밑에 <isinitdata>true</isinitdata> 로설정. requestalldata=false 인경우 <isinitdata>false</isinitdata> 여야합니다. index : 차트가최근에받은자료의 index를나타냅니다. 이는서버사이드에서응답으로전달해준자료입니다. index 를통하여서버와클라이언트간자료중복을줄일수있습니다. 다시말해차트가이전에받은자료의 index를다음호출때파라메터로넘겨줌으로써서버는 index 다음자료를쉽게넘겨줄수있습니다. dummy : 이값은 IE 의캐시문제를피하기위해넣은더미값입니다. 경우에따라서는유용하게쓰일수있습니다 년 1 월 1 일 00 시부터현재차트가 RPC 를보낸순간까지의밀리섹컨드를나타냅니다. 86/170

87 이값은서버의시간기준이아닌클라이언트시간기준입니다 XML 작성규칙 클라이언트가응답으로가져갈 XML 은다음규칙을따라야합니다. 규칙 1. 루트노드다음으로 <infomsg> 노드정보및서브노드정보는반드시필요합니다. ( 이름변경불가 ) 규칙 2. 차트가뿌릴데이터에해당되는노드는반드시 <item> 이여야합니다. ( 이름변경불가 ) 예제 XML 설명 현재예제는랜덤으로값을나타냅니다. (DB 데이터값이아님 ) requestalldata 파라메터의 true/false 에따라다르게 XML 이출력됩니다. 1. requestalldata = false 인경우 데이터한개에해당되는 XML 를생성합니다. 이데이터는차트가기존데이터에 adding 을합니다. 2. requestalldata = true 인경우. 차트가처음로딩시 requestalldata=true 파라메터로요청을합니다. 이때서버사이드에서적당한초기데이터를차트에넘기십시오. 현재샘플에선현재시간의 00분부터현재분 (minutes) 까지누적데이터를생성합니다. requestalldata = true 는초기데이터이므로차트가뿌려줄누적데이터를모두 select 하는것이좋습니다. infomsg 노드의 <nextinitdate> 값시간에다시 true 로설정되어요청합니다. 그외는모두 false로요청. 3. <infomsg> 노드에대한설명. 합니다. 1. <index> 노드. 현재샘플에선 index 파라메터를사용하여샘플이작성되지않았습니다. 그러나이노드는현재서버가작성한데이터의고유값을삽입하면유리합니다. 차트는항상 RPC 요청시차트가최근에응답으로받아간 index를갖고요청을그렇기때문에이파라메터를이용하면다음데이터를쉽게전달해줄수있습니다. 처음차트로딩시 ( 즉, 이전에받아간데이터없을경우 ) 엔 init 임. 2. <timenow> 노드. 서버의현재시간을나타냅니다. 이는데이터를갱신 ( 초기화 ) 할때사용됩니다. 87/170

88 시간을삽입하여주십시오. 비교하여갱신됩니다. 모든클라이언트의데이터를일괄적으로갱신 ( 초기화 ) 하기를원할때서버의현재 이노드를생략한다면모든클라이언트의로컬시간을기준으로 enddate 와 즉, <timenow> 가없다면갱신되는시간은클라이언트마다다를수있습니다. 설정하세요. 3. <isinitdata> 노드. requestalldata = true 로파라메터를받은경우 isinitdata 노드를 true 로 이는서버와클라이언트간규약입니다. 4. <startdate> 노드. 기준으로처음시간이뿌려집니다. 차트에표시되는시간의초기시간입니다. 이노드가없다면처음데이터를 5. <enddate> 노드. 시간과무관, 단순데이터의시간임.) 차트에표시할시간의마지막입니다. 이는데이터가앞으로표현될시간입니다.( 현재 6. <nextinitdate> 노드. 이값보다현재시간이커진다면차트는갱신을시도합니다. 이말은현재차트에뿌려진데이터를모두지우고새로서버에초기데이터를요청하는 requestalldata=true 파라메터로요청을합니다. 이값은실제현재시간과관련이있습니다. 또한 timenow 노드값과깊은관련이있습니다.(timeNow 참고 ) 예를들어한달전데이터를현재 10분주기로보여주고있는데특정시점에서차트의 <enddate> 값까지출력한경우이시간을참조하여초기화를요청하게됩니다. ( 초기화는 requestalldata=true 파라메터설정임 ). < 예제 43 실시간 - 프리미엄서버사이드샘플설명 > 위레이아웃과서버샘플을실행한화면은아래와같습니다. 88/170

89 < 그림 30 실시간 - 프리미엄차트실행화면 > 캔들스틱차트 캔들스틱차트는전문적인주식차트의축소버전입니다. 일반적인주식차트와같이시가, 종가, 고가, 저가거래량의데이터를설정하여출력할수있습니다. 그러나전문적인주식차트와같이마우스로 특정지점에선을긋거나특정기호를삽입하는기능은지원하고있지않습니다. 아래는캔들차트에서지원가능한기능들입니다. 캔들차트안에서의최소, 최대값을표현합니다. 최소, 최대값을사용자가원하는형태로출력할수있습니다. 특정데이터에공시에대한데이터가존재한다면공시기호를표현할수있습니다. 공시기호를일반 itemrenderer 로표현가능하며 div 객체를이용하여특정문자, 이미지를표현할수있습니다. div 로된공시기호는마우스클릭이벤트를받을수있습니다. 시가와종가에따라선색상, 막대테두리, 막대배경색상등을변경할수있습니다. 차트에보여지는아이템의갯수를변경할수있습니다. 89/170

90 < 그림 31 캔들차트기본화면 > <rmatechart backgroundcolor="0xffffff" cornerradius="12" borderstyle="solid"> <Options> <Caption text="riamore CandleChart"/> </Options> // 각종포메터정의 <NumberFormatter id="nft" precision= 0 /> // 한화면에두개의차트를설정할수있는 DualChart 설정 <DualChart leftguttersyncenable="true" rightguttersyncenable="true"> // mainchart와 subchart의왼쪽, 오른쪽여백을동기화시킵니다. <mainchart> <Candlestick2DChart showdatatips= true paddingbottom= 0 > <horizontalaxis> <CategoryAxis id="haxis" categoryfield="date /> </horizontalaxis> <verticalaxis> <LinearAxis baseatzero="false /> </ verticalaxis> <series> // openfield : 시가 closefield : 종가 highfield : 고가 lowfield : 저가 // showmaxvaluelabel : 가장큰값수치를표현합니다. // showminvaluelabel : 가장작은값수치를표현합니다. <Candlestick2DSeries openfield="openprc" closefield="closeprc" highfield="high" lowfield="low" showminvaluelabel="true" showmaxvaluelabel="true" maxlabeljsfunction="maxlabelfunc" minlabeljsfunction="minlabelfunc"> // 시가보다종가가높을경우막대의색상입니다. <fill> <SolidColor color="#ff0000" alpha="0.5"/> </fill> // 시가보다종가가높을경우고가와저가를잇는선의색상입니다. <stroke> <Stroke color="#ff0000"/> </stroke> // 시가보다종가가높을경우막대의테두리색상입니다. <boxstroke> <Stroke color="#ff0000"/> </boxstroke> // 종가보다시가가높을경우막대의배경색상입니다. <declinefill> <SolidColor color="#0000ff" alpha="0.5"/> </declinefill> // 종가보다시가가높을경우고가와저가를잇는선의 90/170

91 색상입니다.. <declinestroke> <Stroke color="#0000ff"/> </declinestroke> // 종가보다시가가높을경우막대의테두리색상입니다. <declineboxstroke> <Stroke color="#0000ff"/> </declineboxstroke> </Candlestick2DSeries> </series/> <horizontalaxisrenderers> <Axis2DRenderer placement="bottom axis="{haxis}" ticklength="0 /> </horizontalaxisrenderers> <annotationelements> // synccrossrangezoomer : mainchart의십자선과동기화시킬 subchart의 CrossRangeZoomer id를설정합니다. <CrossRangeZoomer id="candlecrz enablezooming="false" synccrossrangezoomer="{columncrz} zoomtype="both horizontallabelformatter="{nft} /> </annotationelements> </Candlestick2DChart> </mainchart> <subchart> <Column2DChart showdatatips="true" height="20%" paddingtop="0" paddingbottom="0" guttertop="4"> <horizontalaxis> <CategoryAxis id="haxis2" categoryfield="date /> </horizontalaxis> <verticalaxis> <LinearAxis baseatzero="false /> </ verticalaxis> <series> <Column2DSeries yfield="trdvolume" itemrenderer="boxitemrenderer"> <fill> <SolidColor color="#eca614"/> </fill> </Column2DSeries> </series> <horizontalaxisrenderers> <Axis2DRenderer axis="{haxis2}" showlabels="false ticklength="0 /> </horizontalaxisrenderers> <annotationelements> // synccrossrangezoomer : subchart의십자선과동기화시킬 mainchart의 CrossRangeZoomer id를설정합니다. 91/170

92 <CrossRangeZoomer id="columncrz enablezooming="false" synccrossrangezoomer="{candlecrz} horizontallabelformatter="{nft} verticallabelplacement="top /> </annotationelements> </Column2DChart> </subchart> <dataselector> <DualScrollBar inverted="true" visibleitemsize="50"/> </dataselector> </DualChart> </rmatechart> < 예제 44 캔들차트기본예제 > 공시데이터기호 < 그림 32 캔들차트공시표현화면 > <rmatechart backgroundcolor="0xffffff" cornerradius="12" borderstyle="solid"> <Options> <Caption text="riamore CandleChart"/> </Options> // 각종포메터정의 <NumberFormatter id="nft" precision= 0 /> // 한화면에두개의차트를설정할수있는 DualChart 설정 <DualChart leftguttersyncenable="true" rightguttersyncenable="true"> // mainchart와 subchart의왼쪽, 오른쪽여백을동기화시킵니다. <mainchart> <Candlestick2DChart showdatatips= true paddingbottom= 0 > <horizontalaxis> <CategoryAxis id="haxis" categoryfield="date /> </horizontalaxis> <verticalaxis> 92/170

93 <LinearAxis baseatzero="false /> </ verticalaxis> <series> // openfield : 시가 closefield : 종가 highfield : 고가 lowfield : 저가 // showmaxvaluelabel : 가장큰값수치를표현합니다. // showminvaluelabel : 가장작은값수치를표현합니다. // symbolfield : 공시데이터를설정하는데이터필드입니다. // symbolrenderer : 공시데이터의존재유무를알려주는렌더러입니다. <Candlestick2DSeries openfield="openprc" closefield="closeprc" highfield="high" lowfield="low" showminvaluelabel="true" showmaxvaluelabel="true" maxlabeljsfunction="maxlabelfunc" minlabeljsfunction="minlabelfunc" symbolfield="gongsi" symbolrenderer="uparrowitemrenderer"> // 시가보다종가가높을경우막대의색상입니다. <fill> <SolidColor color="#ff0000" alpha="0.5"/> </fill> // 시가보다종가가높을경우고가와저가를잇는선의색상입니다. <stroke> <Stroke color="#ff0000"/> </stroke> // 시가보다종가가높을경우막대의테두리색상입니다. <boxstroke> <Stroke color="#ff0000"/> </boxstroke> // 종가보다시가가높을경우막대의배경색상입니다. <declinefill> <SolidColor color="#0000ff" alpha="0.5"/> </declinefill> // 종가보다시가가높을경우고가와저가를잇는선의색상입니다.. <declinestroke> <Stroke color="#0000ff"/> </declinestroke> // 종가보다시가가높을경우막대의테두리색상입니다. <declineboxstroke> <Stroke color="#0000ff"/> </declineboxstroke> </Candlestick2DSeries> </series/> <horizontalaxisrenderers> <Axis2DRenderer placement="bottom axis="{haxis}" ticklength="0 /> </horizontalaxisrenderers> 93/170

94 <annotationelements> // synccrossrangezoomer : mainchart의십자선과동기화시킬 subchart의 CrossRangeZoomer id를설정합니다. <CrossRangeZoomer id="candlecrz enablezooming="false" synccrossrangezoomer="{columncrz} zoomtype="both horizontallabelformatter="{nft} /> </annotationelements> </Candlestick2DChart> </mainchart> <subchart> <Column2DChart showdatatips="true" height="20%" paddingtop="0" paddingbottom="0" guttertop="4"> <horizontalaxis> <CategoryAxis id="haxis2" categoryfield="date /> </horizontalaxis> <verticalaxis> <LinearAxis baseatzero="false /> </ verticalaxis> <series> <Column2DSeries yfield="trdvolume" itemrenderer="boxitemrenderer"> <fill> <SolidColor color="#eca614"/> </fill> </Column2DSeries> </series> <horizontalaxisrenderers> <Axis2DRenderer axis="{haxis2}" showlabels="false ticklength="0 /> </horizontalaxisrenderers> <annotationelements> // synccrossrangezoomer : subchart의십자선과동기화시킬 mainchart의 CrossRangeZoomer id를설정합니다. <CrossRangeZoomer id="columncrz enablezooming="false" synccrossrangezoomer="{candlecrz} horizontallabelformatter="{nft} verticallabelplacement="top /> </annotationelements> </Column2DChart> </subchart> <dataselector> <DualScrollBar inverted="true" visibleitemsize="50"/> </dataselector> </DualChart> </rmatechart> < 예제 45 캔들차트공시표현예제 > 위캔들차트기본형외에아래그림과같이캔들라인차트, 캔들영역차트로출력을할수있습니다. 94/170

95 <Candlestick2D 부분을 <CandleLine2D, <CandleArea2D 로변경하시고데이터필드명만변경하시면 아래와같은차트를출력하실수있습니다. 더욱자세한내용은샘플페이지와 api 를참고하십시오 < 그림 33 캔들차트기본형외에캔들라인, 캔들영역차트 > 게이지차트 Circular 게이지 Circular 게이지의시작과끝노드는 <CircularGauge/> 입니다. 0~360 도범위를갖는원형게이지를생성하게되는데디폴트 0 도의위치는시계 3 시방향이며시계방향으로각도는진행됩니다. Circular 게이지는크게배경프레임, 바늘, 바늘커버 3 개로구성되어있습니다. 이 3 개를각각디자인함으로써다양한모습의게이지작성이가능합니다. 게이지는기본적으로디폴트속성을갖고있습니다. 그러나반드시사용자가정의해야할속성은아래와같습니다. startangle minimumangle maximumangle value minimum maximum <rmatechart> <Options> <Caption text=" 게이지예제 - Red"/> <SubCaption text=" 게이지, 색상, 그라데이션등을변경할수있습니다." textalign="right" paddingright="10" fontsize="11" /> </Options> <CurrencyFormatter id="numfmt" precision="0" currencysymbol="%" alignsymbol="right"/> <CircularGauge width="300" height="300" valuechangefunction="valuechangefunc" 95/170

96 </CircularGauge> startangle="270" minimumangle="0" maximumangle="360" minimum="0" maximum="100" value="28" interval="10" minorinterval="2" formatter="{numfmt}" padding="10" labelgap="10" ticklabelstylename="ticktext" valuelabelstylename="valuetext" editmode="true" livedragging="true" showdatatip="true" tickcolor="0xcccccc" minortickcolor="0x932108" coverradiusratio="0.1" hideticklabel="first" needlethickness="10" pointthickness="5" needlelengthratio="0.6" needlepointstyle="steeple" needlebacklengthratio="0" isvaluetop="false" valueyoffset="50"> <framestroke> <Stroke color="0xcccccc" weight="10"/> </framestroke> <framefill> <SolidColor color="0x932108"/> </framefill> <needlefill> <LinearGradient angle="90"> <entries> <GradientEntry color="0xeeeeee" ratio="0" alpha="1"/> <GradientEntry color="0x555555" ratio="1" alpha="1"/> </entries> </LinearGradient> </needlefill> <needlecoverfill> <RadialGradient> <entries> <GradientEntry color="0xffffff" ratio="0" alpha="1"/> <GradientEntry color="0xb0b0b0" ratio="1" alpha="1"/> </entries> </RadialGradient> </needlecoverfill> 96/170

97 <Style> </Style>.valueText { fontsize:12; fontfamily:myriad; textalign:center; bordercolor:0x999999; backgroundcolor:0xffffff; backgroundalpha:1; paddingtop:2; borderthickness:1; borderalpha:1; borderstyle:solid; color:0xff0000; }.ticktext { fontfamily:myriad; fontsize:18; color:0xffffff; } </rmatechart> < 예제 46 Circular 게이지레이아웃예제 > 위레이아웃을실행시킨화면은아래와같습니다. < 그림 34 Circular 게이지실행화면 > Half-Circular 게이지 Half-Circular 게이지는 <HalfCircularGauge/> 노드로시작과끝을정의합니다. Half-Circular 게이지에서시작각도 (startangle) 은무효한속성입니다. 97/170

98 minimumangle 은초기값이 180 도입니다. 즉, Half-Circular 게이지의특성상 9 시방향이초기점이됩니다. 9 시방향은 180 도에해당됩니다. 만약 180 도보다작은각도를설정시 Half 게이지는 180 도로강제설정하게됩니다. 또한 maximumangle 은 360 도보다커질수없습니다. 따라서 Half-Circular 게이지가표현할수있는범위는 9 시방향에서 3 시방향사이입니다. 그외모든속성및스타일은 Circular 게이지와같습니다 Cylinder 게이지 실린더게이지는수직형태와수평형태가존재합니다. 수직형태의실린더게이지를생성하기위해서는 <HCylinderGauge/> 노드로시작과끝을결정하고, 수평형태의실린더게이지를생성하기위해서는 <HCylinderGauge/> 노드로시작과끝을정의합니다. 다은은수직실린더게이지의샘플레이아웃을작성한모습과실행화면입니다. <rmatechart backgroundcolor="0xffffff" cornerradius="12" borderstyle="solid"> <Options> <Caption text=" 게이지 "/> </Options> <VCylinderGauge id="cy1" width="30%" height="180" minimum="0" maximum="160" labels="[0, 20, 40, 60, 80, 100, 120, 140, 160]" value="50" targetmark="150" snapinterval="1" tickthickness="2" ticklength="2" tickinterval="20" livedragging="true" tickcolor="0x000000" valuelabelxoffset="10" valuelabelstylename= valuelabel /> <Style>.valuelabel{ fontweight:bold; } </Style> </rmatechart> < 예제 47 VCylinderGauge 레이아웃예제 > 98/170

99 < 그림 35 VCylinderGauge 실행화면 > Linear 게이지 리니어게이지는세로방향의막대모양과가로방향의막대모양으로나뉩니다. 세로방향은 <VLinearGauge/> 로시작과끝을정의하고, 가로방향은 <HLinearGauge/> 노드로정의합니다. 리니어게이지는크게값 (value) 를표현하는막대와목표치를나타내는목표선 (target line) 으로구성되어있습니다. 다음은수평리니어게이지의샘플레이아웃과실행화면입니다. <rmatechart backgroundcolor="0xffffff" cornerradius="12" borderstyle="solid"> <Options> <Caption text=" 게이지 "/> </Options> <HLinearGauge id="hl" width="300" height="100" minimum="0" maximum="100" livedragging="true" labels="[0, 25, 50, 75, 100]" value="50" targetmark="90" tickthickness="1" ticklength="4" tickinterval="5" snapinterval="1" linearcolumnwidth=".6" tickcolor="#000000" valuelabelfontweight="bold" /> <Style>.valuelabel { 99/170

100 } </Style> </rmatechart> fontweight:bold; < 예제 48 Horizontal Linear Gauge 레이아웃예제 > < 그림 36 Horizontal Linear Gauge 실행화면 > 슬라이드차트기능사용하기 슬라이드차트기능은여러페이지의차트를생성하여프리젠테이션형식과같이차트를보여주는기능 입니다. 슬라이드차트에삽입가능한차트에는제한이없습니다. 알메이트차트에서작성가능한차트는모두슬 라이드차트로표현가능합니다. 슬라이드차트는반드시다음규칙을따라야합니다. 1. 레이아웃은 setslidelayoutset() 함수로삽입해야합니다. 2. 데이터는 setslidedataset() 함수로삽입해야합니다. 위규칙대로레이아웃과데이터를삽입하면슬라이드차트가생성됩니다. 예를들어총 5 페이지의차트슬라이드를구성한다면데이터와레이아웃은각각 5 개의쌍으로이루어져야합니다. 따라서레이아웃과데이터는배열형태가되며배열요소는각각스트링형태의레이아웃과배열형태의데이터가됩니다. 다음은그에대한예제입니다. <!-- 사용자정의설정시작 --> <script language="javascript" type="text/javascript"> // 차트 chartvars 설정시작 // rmate 차트생성준비가완료된상태시호출할함수를지정합니다. 100/170

101 var chartvars = "rmateonloadcallfunction=rmatechartonload"; // 차트 chartvars 설정끝 // rmate 차트준비가완료된경우이함수가호출됩니다. function rmatechartonload() { var layout1 = getcartesianlayout("column2d"," 칼럼차트로표현 ",["Profit"]); var layout2 = getcartesianlayout("line2d"," 라인차트로표현 ",["Profit"]); var layout3 = getcartesianlayout("column3d"," 칼럼 3D 멀티데이터표현 ",["Profit","Cost"]); 매뉴얼은같은레이아웃과같은데이터로슬라이드차트를표현하고있습니다. // 슬라이드에넣을데이터와레이아웃들. layoutset = [layout1, layout2, layout3, layout1, layout2]; dataset = [chartdata, chartdata,chartdata, chartdata, chartdata]; // 슬라이드에서표현할레이아웃들삽입. document.getelementbyid("chart").setslidelayoutset(layoutset); } // 슬라이드에서표현할데이터들삽입. document.getelementbyid("chart").setslidedataset(dataset); // 레이아웃을반환하는함수를작성한것입니다. // 해당레이아웃은스트링형태의조합이므로개발자에의해다음과같은함수작성이가능합니다. // 파라메터설명 //type : 차트 type //title : 차트 Caption //datafield : 시리즈가표현할실데이터의필드명배열 function getcartesianlayout(type, title, datafield) { var layout="<rmatechart borderstyle='solid'>" +"<Options><Caption text='" + title +"'/></Options>" +"<" + type + "Chart showdatatips='true'>" +"<series>"; + "'/>" for(var i=0; i<datafield.length; ++i) { } layout += "<" + type +"Series yfield='" + datafield[i] + "' displayname='" + datafield[i] layout +="</series>" 101/170

102 +"<horizontalaxis>" + "<CategoryAxis categoryfield='month'/>" +"</horizontalaxis>" +"</" + type + "Chart>" +"</rmatechart>"; return layout; } // 배열데이터로정의 var chartdata = [{"Month":"Jan", "Profit":13000}, {"Month":"Feb", "Profit":12000}, {"Month":"Mar", "Profit":15000}, {"Month":"Apr", "Profit":22200}, {"Month":"May", "Profit":18000}, {"Month":"Jun", "Profit":15000}, {"Month":"Jul", "Profit":22000}, {"Month":"Aug", "Profit":14000}, {"Month":"Sep", "Profit":26000}, {"Month":"Oct", "Profit":22000}, {"Month":"Nov", "Profit":28000}, {"Month":"Dec", "Profit":34000}]; <!-- 사용자정의설정끝 --> < 예제 49 슬라이드차트작성예제 > < 그림 37 슬라이드차트출력모습 > 102/170

103 6.29. 트리맵차트 트리맵차트는계층적데이터를설정하여자식부모관계의데이터를사각형의모양으로출력하는차트입니다. 자식에해당하는데이터는부모의사각형안에부모보다작은크기로출력이되어집니다. 트리구조로박스크기와색상으로해당데이터들의연관성을출력합니다. 동일한카테고리의데이터가지역에따라혹은상황에따라달라지거나각지역별로투표율에대한내용등이러한데이터들을한눈에보기쉽게출력해주는차트입니다. < 그림 38 트리맵차트 > 트리맵차트의데이터는아래와같은구조를가지고있어야합니다. // 차트데이터 var chartdata = [ { "name":"master", "items": [ { "name": "ABCD", "items" : [ {"Month":"Jan", "Vancouver":80}, 103/170

104 ]; } ] },{ } {"Month":"Feb", "Vancouver":90}, {"Month":"Mar", "Vancouver":383}, {"Month":"Apr", "Vancouver":81}, {"Month":"Test text width", "Vancouver":87}, {"Month":"Jun", "Vancouver":89}, {"Month":"Jul", "Vancouver":86}, {"Month":"Aug", "Vancouver":192}, {"Month":"Sep", "Vancouver":88}, {"Month":"Oct", "Vancouver":84}, {"Month":"Nov", "Vancouver":87}, {"Month":"Dec", "Vancouver":90} ] "name" : "CDEF", "items" : [ {"Month":"Jun", "Vancouver":189}, {"Month":"Jul", "Vancouver":186}, {"Month":"Aug", "Vancouver":192}, {"Month":"Sep", "Vancouver":188}, {"Month":"Oct", "Vancouver":184}, {"Month":"Nov", "Vancouver":187}, {"Month":"Dec", "Vancouver":190} ] 위데이터에서최상위부모는 master 라고정의된데이터이며해당 master 데이터자식데이터로 ABCD, CDEF 데이터가존재하며각 ABCD, CDEF 에게도자식데이터들이존재하게됩니다. 트리맵차트는위부모자식간의데이터를가지고 < 그림 38 트리맵차트 > 와같이각데이터별로사각형형태로출력이되어집니다 워드클라우드 워드클라우드차트는각단어들의중요도나인기도의데이터를시각적으로표현해주게됩니다. 각단어들은중요도나인기의수치에따라글자색상이변하거나크기가변경되며출력됩니다. 워드클라우드차트의데이터는두가지형태로나눌수있습니다. 하나는기존형태로어떤데이터를출력할지설정하는것입니다. ( ex / yfield = field 명 xfield = field 명 ) 또하나의방법은배열안에 104/170

105 출력할단어데이터들만을가지고있는형태입니다. ( ex / data = [ 가, 나, 다, 라, 가, 다 ] ) 이데이터형태를설정할경우차트는해당데이터들을처음부터끝까지검색하여같은단어가몇개나존재하는지계산하여데이터를새로구성하게됩니다. 이시간이존재함으로데이터의양이많아질경우첫번째방법과출력속도차이가달라질수있습니다. < 그림 39 워드클라우드 > 워드클라우드데이터설정첫번째방법 var chartdata = ["Lorem", "ipsum", "dolor", "sit", "amet", "consectetuer", "sadipscing", "elitr", "sed", ipsum ]; 워드클라우드데이터설정두번째방법 var chartdata = [{"text":" 강남구 ", "value":12},{"text":" 강동구 ", "value":8},{"text":" 광진구 ", "value":9}, {"text":" 강서구 ", "value":3}, {"text":" 관악구 ", "value":3}, {"text":" 강북구 ", "value":1},. ]; 위설명과같이워드클라우드데이터설정은두가지방법이존재합니다. 가져온데이터는가장큰값을시작으로작은값까지순서대로출력되어집니다. 브라우저의폰트, 클라이언트의폰트환경에따라설치가안되어있거나지원하지않는폰트라면 올바르게출력이되지않거나글자가꺠져서나올수있습니다. 105/170

106 6.31. 벡터차트 < 그림 40 벡터차트 > 벡터차트는각도데이터와크기데이터를가지고각데이터를선으로표현하는차트입니다. 그림 40 을살펴보면 x 축으로는각날짜를표현하며해당날짜에대하여어느방향으로얼마만큼의세기로바람이부는지표현하고있습니다. 풍향데이터가아닌바다의유속데이터혹은그외의데이터에관하여각도와크기를가지고있다면벡터차트로표현이가능합니다 에러바차트 에러바차트는다량의데이터들을가지고오차혹은확실하지않은측정값의범위를출력해주도록합 니다. 차트에설정된데이터들의평균을구하고표준편차를구한후표준오차를출력해내어각데이터들 의평균값에서오차범위를나타냅니다. 에러바차트의경우의데이터구조는아래와같습니다. var chartdata = [{"Month":"Jan", "temperature":[6,8.89,14.39,.]}, {"Month":"Fen", "temperature":[9.39,5,1.72,..]}, {"Month":"Mar", "temperature":[1,0.61,2,15.61,..]}, {"Month":"Apr", "temperature":[19,16.74,14.39,17.28,..]},.. ]; 106/170

107 위데이터와같이 ErrorBar 로출력할데이터는 temperature 필드에배열형태의데이터를설정합니다. 차트내에서는해당필드의데이터집합들을가져와출력하게됩니다. < 그림 41 에러바차트 >. +'<Column2DChart showdatatips="true" datatipformatter="{cft}">'. +'<series>' +'<Column2DSeries yfield="temperature" showerrorbar="true" errorbardirection="both"/>' +'</series>' +'</Column2DChart>'. 위레이아웃에서 yfeidl 로차트에설정한데이터들중 temperature 필드를설정하도록합니다. 설정한 showerrorbar= true 속성으로오차범위에대한선을출력하도록합니다. errorbardirection 으로오차범위에대한선의방향을설정합니다. 선의방향은아래와같이 3 가지를설정할수있습니다. both 위, 아래로선을그리도록합니다. up 위에만선을그리도록합니다. down 아래만선을그리도록합니다. 107/170

108 6.33. 박스플롯차트 박스플롯차트는다량의데이터들을최소값, 최대값, 2 사분위, 3 사분위로나타냅니다. 차트에설정된데이터들을최소값에서부터최대값까지 25% 씩나누어표현합니다. 최소값에서부터 2 사분위, 3 사분위에서최대값까지를선으로표현하며 2 사분위에서 3 사분위까지를 Box 형태로출력합니다. < 그림 42 박스플롯차트 > 아래는위그림의샘플데이터입니다. // 차트데이터 var chartdata = [{"category":"a Drug", "Drug1":[ , , , , , , , , , , , , 0.786, , , , , , , , , , , , , , , , , , , , , , , , , , , , ], "Drug2":[ , , , , , , , , , , , 2.2, , , , 0, , , , , , , , , , , , , , , , , , , , , , , , , ]}, ]; 108/170

109 6.34. 히스토그램차트 히스토그램차트는도수분포표를그래프로나타내는차트입니다. 차트에설정된데이터들을가지고사용자가설정한구간을기준으로데이터들에대한그룹을정하고해당그룹에대한데이터를출력하는차트입니다. 그림 43 의샘플은특정학급에대하여수능성적에대한히스토그램차트이며각점수에대한구간을설정합니다. 설정한구간에해당되는데이터들의개수를추출하여추출된데이터를가지고차트로출력합니다. < 그림 43 히스토그램차트 > // 스트링형식으로레이아웃정의. var layoutstr = '<rmatechart backgroundcolor="0xffffff" borderstyle="none">' +'<Histogram2DChart binrange="[270,280,290,300,310,320,330,340,350,360,370]". >'. 위히스토그램차트레이아웃에서 <Histogram2DChart 의노드로 binrange 를설정하도록합니다. binrange 로 270 점에서부터 10 점마다총 370 까지의구간을설정하였습니다. 각구간에해당하는데이터들의개수를세어출력하며설정된구간을넘어가는데이터에관하여서는 more 와같이출력하도록합니다. 109/170

110 6.35. 모션차트 모션차트는데이터들이변화되는과정을차트아래부분의슬라이더로변경하며확인할수있는차트입니다. 재생버튼을실행하면현재출력되어있는데이터부터마지막의데이터까지순차적으로진행되어출력되고슬라이더부분을중간중간클릭하여사용자가원하는부분에대한데이터를출력하게합니다. < 그림 44 모션차트 > 모션차트는버블, 컬럼, 라인세가지의차트만을지원하고있으며각차트의특성에따라레이아웃과 데이터의설정부분이달라지게됩니다. 버블, 컬럼 // 차트데이터 var chartdata = [ {"Month":"2009년2월","Data1": ,"Data2": ,"Data3":316,"Data4": }, {"Month":"2009년7월","Data1":316.29,"Data2": ,"Data3":319,"Data4": }, ]; 라인 // 차트데이터 var chartdata = [ [ {"Month":"Jan", "Data1":312}, 110/170

111 ]; ],[ ],[ ] {"Month":"Feb", "Data1":300},. {"Month":"Jan", "Data1":612}, {"Month":"Feb", "Data1":600},.. 버블과컬럼은차트에설정하던기존방법과같은식으로데이터를설정하는반면 라인은버블과컬럼에넣는데이터형식을묶은배열데이터를차트에설정하게됩니다. 7. 고급사용자를위한 rmate Chart 레이아웃설정 차트에수치필드표시하기 차트데이터에해당되는수치를아래그림과같이차트에표시할수있습니다. 이는차트의시리즈속성으로각각의시리즈에대한속성은 labelposition 입니다. 시리즈에따라 labelposition 의유효값이다릅니다. 아래표는 labelposition 의유효값에대한설명입니다. 대표시리즈명유효값설명 ColumnSeries(2D, 3D), BarSeries(2D, 3D), ImageSeries Line2DSeries, Area2DSeries inside, outside, both, none up, down, both, none 수치필드를안쪽에표시할지바깥쪽에표시할지또는양쪽에표시할지를지정합니다. 수치필드를데이터포인트를기준으로위에표시할지아래에표시할지또는양쪽에표시할지를지정합니다. 111/170

112 Bubble3DSeries PieSeries(2D,3D) inside,none inside, outside, callout, insidewithcallout 버블안쪽에수치필드를표시할지여부를나타냅니다. 파이안쪽, 바깥쪽또는선을귿고바깥쪽에표시할지를지정합니다. insidewithcallout 을설정한경우파이의크기가충분히커라벨이표시될공간이있는경우 inside 에공간이부족한경우 callout 형태로출력합니다. < 표 16 시리즈별 labelposition 유효값및설명 > 7.2. 차트시리즈아이템각각에컬러지정하기. 차트시리즈아이템의컬러는선색깔과채우기색으로나뉩니다. <series> <Area2DSeries yfield="profits" form="curve" displayname="profits"> <areafill> <SolidColor color="0x00ff99"/> </areafill> <areastroke> <Stroke color="0xff0000" weight="3"/> </areastroke> </Area2DSeries> </series> 영역차트는 areafill, areastroke 를사용한 다는점에주의. < 예제 50 영역차트에 areafill 과 stroke 를한경우 > 112/170

113 <Line2DChart> <horizontalaxis> <CategoryAxis categoryfield="month"/> </horizontalaxis> <series> <Line2DSeries yfield="profit" form="curve" displayname="profit"> <linestroke> <Stroke color="0xf0ff00" weight="4"/> // color 는선색깔을나타냅니다. // weight 은선의두께를나타냅니다. </linestroke> </Line2DSeries> </series> </Line2DChart> 라인차트는 linestroke 를사용한다는점 에주의. < 예제 51 라인차트의선 (stroke) 를변경한경우 > 7.3. 축 (Axis) 에대한스타일적용하기 축스타일설명및예제 < 그림 45 축꾸미기를표현한그림 > 113/170

114 위는수평축과수직축을사용자정의한화면입니다. 위에표시된번호의설명은아래와같습니다. 1. 수직축의 Maximum 값을나타냅니다. 이는오직 LinearAxis 에서만유효합니다. 2. minortick 을나타냅니다. minortick 의길이와 Stroke 스타일을정의할수있습니다. 3. tick 을나타냅니다. tick 길이와 tick 의위치, Stroke 스타일을정의할수있습니다. 4. 축에표시된숫자들의간격을의미합니다. 현재는 500 입니다. LinearAxis 에서만유효합니다. 5. 수직축과수평축의전체적인 Stroke 스타일입니다. 현재하늘색의축을정의하였습니다. 6. 축의대표제목을붙일수있습니다. 7. tick 과라벨과의관계입니다. 라벨과라벨사이에 tick 존재하는경우와라벨위에 tick 존재하는 경우로나뉩니다. 현재는라벨위에 tick 이존재하는경우입니다. 위에서지시하고설명한부분을레이아웃에서찾아보면다음과같습니다. <Column3DChart> 6 <horizontalaxis> <CategoryAxis categoryfield="month" ticksbetweenlabels="false" title="month" displayname="month"/> </horizontalaxis> <verticalaxis> <LinearAxis interval="500" baseatzero="true" maximum="3500"/> </verticalaxis> <horizontalaxisrenderers> <!-- 수평축 --> 3 <Axis3DRenderer visible="true" 3 ticklength="5" minorticklength="5" tickplacement="outside" placement="bottom" candroplabels="false" showlabels="true" labelalign="center"> <!-- 수평축의위치나타냄 top 또는 bottom <axisstroke> <Stroke weight="10" color="0x66ccff" caps="none"/> </axisstroke> <tickstroke> <Stroke weight="1" color="0x000000" alpha="0.5" /> </tickstroke> <minortickstroke> <Stroke weight="1" color="0x000000" caps="square"/> </minortickstroke> 7 114/170

115 </Axis3DRenderer> </horizontalaxisrenderers> <verticalaxisrenderers> <! 수직축꾸미기는수평축과같습니다. 수평축을참고하여주십시오.--> <Axis3DRenderer visible="true" ticklength="30" minorticklength="3" tickplacement="left" placement="left" <! 수직축의위치, left 또는 right--> candroplabels="false" showlabels="true" labelalign="center"> <axisstroke> <Stroke weight="10" color="0x66ccff" caps="none"/> </axisstroke> <tickstroke> <Stroke weight="1" color="0x000000" /> </tickstroke> <minortickstroke> <Stroke weight="1" color="0x000000" caps="square"/> </minortickstroke> </Axis3DRenderer> </verticalaxisrenderers>... </Column3DChart> < 예제 52 축꾸미기설정한예제 > 115/170

116 축의 Visible 속성사용하여축의유, 무나타내기. <Column3DChart>... <horizontalaxisrenderers> <Axis3DRenderer placement="bottom" showlabels="true" labelalign="center"> </Axis3DRenderer> </horizontalaxisrenderers> <verticalaxisrenderers> <Axis3DRenderer visible="false"> </Axis3DRenderer> </verticalaxisrenderers>... </Column3DChart> < 예제 53 수직축보이지않게설정한예제 > 축의위치바꾸기. <rmatechart> <Column2DChart>... <horizontalaxisrenderers> <Axis2DRenderer placement="top" showlabels="true"> </Axis2DRenderer> </horizontalaxisrenderers> <verticalaxisrenderers> <Axis2DRenderer placement="left" showlabels="true"> </Axis2DRenderer> </verticalaxisrenderers> /170

117 < 예제 54 수평축을위쪽으로, 수직축을오른쪽으로... 수직축라벨을감춘예제 > 세로축 2 개 ( 듀얼축 ) 로각각의데이터표현하기. <rmatechart cornerradius="12" borderstyle="solid"> <Options> <Caption text="annual Report" /> <SubCaption text="2008" /> <Legend /> </Options> <Combination2DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month" /> </horizontalaxis> <verticalaxis> // 칼럼시리즈가참고할수직축을정의합니다. <LinearAxis id="axis1"/> </verticalaxis> <series> <Column2DSeries yfield="profit" displayname="profit"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> <fill> <SolidColor color="0x66cc66" /> </fill> </Column2DSeries> <Line2DSeries selectable="true" yfield="cost" displayname="cost"> <verticalaxis> // 라인시리즈가참고할수직축을정의합니다. <LinearAxis id="axis2"/> </verticalaxis> <showdataeffect> <SeriesInterpolate /> </showdataeffect> <linestroke> <Stroke color="0xffcc00" weight="3" /> </linestroke> </Line2DSeries> </series> <verticalaxisrenderers> // 차트에서각각의시리즈가만든축을참조하도록설정합니다. <Axis2DRenderer axis="{axis1}"/> <Axis2DRenderer axis="{axis2}"/> </verticalaxisrenderers> </Combination2DChart> 117/170

118 </rmatechart> < 예제 55 수직축 2 개설정한예 > < 그림 46 수직축 2 개설정한경우결과 > 수직, 수평축의수치에 3 자리단위로컴마 (,) 찍기 LinearAxis 로정의된수직축또는수평축은출력결과가숫자입니다. 수의단위가천단위를넘었을 경우컴마구분자를삽입하여읽기쉽게표현할수있습니다. <rmatechart cornerradius="12"> <Options> <Caption text="anual Report"/> </Options> <NumberFormatter id="numfmt" usethousandsseparator="true"/> <Column3DChart> <horizontalaxis> <CategoryAxis categoryfield="month"/> </horizontalaxis> <verticalaxis> <LinearAxis formatter="{numfmt}"/> </verticalaxis> <series> <Column3DSeries yfield="profit" displayname="profit"/> </series> </Column3DChart> </rmatechart> 118/170

119 < 예제 56 수직축수치에컴마구분자넣기 > 속성명유효값설명 usethousandsseparator True false ( 기본값 :true) true 의경우, 수치는 3 자리수마다정해진구 분자로구분됩니다. usenegativesign true false ( 기본값 :true) true 인경우음수앞에마이너스부호 (-) 를붙 여출력합니다. false 인경우음수를괄호로 출력합니다. precision Number ( 기본값 :-1) 출력할소수의자릿수를나타냅니다. precision를 -1 로설정하면 precision를무효로할수있습니다. 값이 -1 의경우, 자릿수를변경하지않습니다. thousandsseparatorto decimalseparatorto 구분문자 ( 기본값 : 컴마 (,)) 구분문자 ( 기본값 : 도트 (.)) 출력숫자의자릿수구분기호로서사용하는캐릭터를나타냅니다. 소수의값을출력할경우에사용하는소수점의단락캐릭터를나타냅니다. rounding down", "nearest", "up", "none"( 기본값 : none ) 정해진소수점위치에서올림, 반올림등을결 정합니다. < 표 17 NumberFormatter 속성설명표 > 119/170

120 수직, 수평축에통화단위넣기 수직축또는수평축이금액을나타내는경우통화단위를넣을필요가있습니다. 아래예제는대한민국 통화단위인 원 을오른쪽에삽입한예제입니다 <rmatechart> <Options> <Caption text="anual Report"/> </Options> <CurrencyFormatter id="fmt" currencysymbol=" 원 " alignsymbol="right"/> <Column3DChart showdatatips="true" fontsize="11"> <horizontalaxis> <CategoryAxis categoryfield="month"/> </horizontalaxis> <verticalaxis> <LinearAxis formatter="{fmt}"/> </verticalaxis> <series> <Column3DSeries yfield="profit"/> </series> </Column3DChart> </rmatechart> < 예제 57 수직축에통화단위 " 원 " 을삽입한예제 > 속성명유효값설명 currencysymbol 문자 ( 기본값 :$) 포맷의대상이되는수치의통화기호로 서사용되는캐릭터를나타냅니다 alignsymbol left right ( 기본값 :left) 통화기호의위치를, 포맷이끝난수치 의좌측또는우측으로설정합니다. usethousandsseparator True false ( 기본값 :true) true 의경우, 수치는 3 자리수마다정 해진구분자로구분됩니다. usenegativesign true false ( 기본값 :true) true 인경우음수앞에마이너스부호 (- ) 를붙여출력합니다. false 인경우음수 를괄호로출력합니다. precision Number ( 기본값 :-1) 출력할소수의자릿수를나타냅니다. 120/170

121 precision 를 -1 로설정하면 precision 를 무효로할수있습니다. 값이 -1 의경 우, 자릿수를변경하지않습니다. thousandsseparatorto 구분문자 ( 기본값 : 컴마 (,)) decimalseparatorto 구분문자 ( 기본값 : 도트 (.)) 출력숫자의자릿수구분기호로서사용하는캐릭터를나타냅니다. 소수의값을출력할경우에사용하는소수점의단락캐릭터를나타냅니다. < 표 18 CurrencyFormatter 속성설명표 > 수직, 수평축을 DateTimeAxis 정의한경우날짜포맷변환하기. 라인차트에서수평축을 DateTimeAxis 로정의한경우수평축은날짜 ( 시간 ) 에따라데이터가출력됩니다. 예를들어 days 에따라데이터가표현될때수평축의라벨은 2009/07/10, 2009/07/11 과같이표현됩니다. 수평축에표현된날짜의포맷을 07/10/2009 처럼 월 / 일 / 년 또는 2009 년 7 월 10 일 처럼사용자정의형식으로표현하고할때 DateFormatter 를사용합니다. 아래예제는수평축의라벨을 2009 년 7 월 10 일 로표현한것입니다. <rmatechart> <Options> <Caption text="anual Report"/> </Options> <DateFormatter id="datefmt" formatstring="yyyy 년 MM 월 DD 일 " /> <NumberFormatter id="curfmt" /> <Line2DChart showdatatips="true" fontsize="11"> <horizontalaxis> <DateTimeAxis dataunits="days" labelunits="days" interval="4" formatter="{datefmt}" alignlabelstounits="false" displaylocaltime="true"/> </horizontalaxis> <verticalaxis> <LinearAxis formatter="{curfmt}"/> </verticalaxis> <series> <Line2DSeries xfield="date" yfield="profit" displayname="profit"/> </series> </Line2DChart> </rmatechart> 121/170

122 < 예제 58 DateTime 축의날짜포맷변환예 > DateFormatter 를정의한후임의의 id 를부여합니다. 그리고 DateTimeAxis 의 formatter 속성에 DateFormatter 의 id 를할당하십시오. 주의할점은 id 는일반 String 객체가아닌고유객체를나타내는스트링이므로중괄호로묶습니다. (< 예제 7 ID 에의한속성값할당법 > 참고 ) DateFormatter 의속성인 formatstring 표현하는패턴을정의하는속성입니다. 예를들어 2009/12/01 과같이표현하고자할때는 YYYY/MM/DD 로정의하십시오. 이에대한설명은아래표와같습니다. 패턴캐릭터설명표현예 Y 연도 (year) 입니다 YY = 05 YYYY = 2005 YYYYY = M 월 (month) 입니다. M = 7 MM= 07 MMM=Jul MMMM= July D 일 (day) 입니다. H 시 (Hour) 입니다. N 분 (Minute) 입니다. D = 4 DD = 04 DD = 10 H = 1 HH = 01 N = 1 NN = /170

123 S 초 (Second) 입니다. SS = 30 < 표 19 formatstring 패턴캐릭터설명 > 축제목 ( 대표문자 ) 삽입하기. 수직축또는수평축이현재표현하는데이터의이름을넣고자할때가있습니다. 예를들어수직축에 Profit 이라는제목을수평축에 Month 라는제목을넣고자할때예제는아래와같습니다. <rmatechart> <Options> <Caption text="anual Report"/> </Options> <Column2DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month" title="month"/>// 가로축의제목은 Month </horizontalaxis> <verticalaxis> <LinearAxis title="profit"/> // 세로축의제목은 Profit </verticalaxis> <horizontalaxisrenderers> // 가로축을꾸미기위해정의하였습니다. <Axis2DRenderer axistitlestylename="title"/> </horizontalaxisrenderers> <verticalaxisrenderers> // 세로축을꾸미기위해정의하였습니다. <Axis2DRenderer axistitlestylename="title"/> </verticalaxisrenderers> <series> <Column2DSeries yfield="profit"/> </series> </Column2DChart> <Style> // 축의제목 ( 대표문자 ) 를꾸미기위해정의한스타일노드입니다..title //12포인트, 파랑의볼드체로축제목을꾸밉니다. { fontsize:12; color:0x0000ff; fontweight:"bold"; } </Style> </rmatechart> < 예제 59 축에제목 ( 대표문자 ) 를삽입한예제 > 123/170

124 < 그림 47 축에제목 ( 대표문자 ) 를삽입한결과화면 > 7.4. 차트축을기준으로안쪽의배경꾸미기 차트안쪽배경에그리드라인삽입하기. X 축과 Y 축을갖는모든차트는속성으로 backgroundelements 를갖습니다. 이 backgroundelements 는 차트에서축을기준으로안쪽에해당되는영역의배경을의미합니다. 이곳을꾸미기위해 backgroundelements 속성을이용합니다. < 예제 60 차트의축안쪽배경에스타일적용한경우 > 위예제는수평선만을정의한경우입니다. 이에대한옵션설명은다음과같습니다. direction = horizontal, vertical, both : 수평선정의, 수직선정의, 수평, 수직모두정의 124/170

125 horizontalchangecount = 1 : 1 줄단위로 fill 과 alternatefill 색이변합니다. horizontalstroke : fill 과 alternatefill 사이의선을정의합니다. horizontalfill : 최초시작하는채우기색입니다.( 예제의옅은오렌지색 ) horizontalalternatefill : fill 의상대적인채우기색입니다.( 예제의오렌지색 ) 아래레이아웃예제에서 direction = vertical 로변경하면수직선이나옵니다. 수직선정의부분은 수평선과같습니다. 참고하십시오. ( 레이아웃예제의회색강조부분이수직선을의미합니다. <rmatechart> <Column3DChart> <backgroundelements> <GridLines direction="horizontal" verticalchangecount="1" horizontalchangecount="1"> <horizontalstroke> <Stroke color="0xff9966" alpha="1" weight="2"/> </horizontalstroke> <horizontalfill> <SolidColor color="0xffcc99" alpha="0.5"/> </horizontalfill> <horizontalalternatefill> <SolidColor color="0xffffcc" alpha="0.5"/> </horizontalalternatefill> </GridLines> </backgroundelements> </Column3DChart> </rmatechart> < 예제 61 차트의축안쪽배경에스타일적용한예제 > 차트안쪽배경에이미지삽입하기. 차트안쪽배경에외부이미지를삽입하기위해서는차트의 backgroundelements 속성또는 annotationelements 속성을이용합니다. backgroundelements 속성은그래프가뿌려진레이어를기준으로뒷면을의미하고 annotationelements 속성은그래프가뿌려진레이어를기준으로앞면을의미합니다. 다음은 backgroundelements 속성을이용하여이미지를삽입하는예제입니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Line2DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month"/> </horizontalaxis> <series> <Line2DSeries yfield='profit' displayname='profit' itemrenderer=circleitemrenderer' radius='5'> 125/170

126 <showdataeffect> <SeriesInterpolate /> </showdataeffect> <linestroke><stroke color='0xff3366' weight='2'/></linestroke> <stroke><stroke color='0xff3366' weight='2'/></stroke> </Line2DSeries> </series> <backgroundelements> <Image source=" maintainaspectratio="false" alpha="1"/> </backgroundelements> </Line2DChart> </rmatechart> < 예제 62 차트배경에이미지삽입예제 > < 그림 48 차트배경에이미지삽입한화면 > 차트앞면에이미지를삽입하는방법은 < 예제 62 차트배경에이미지삽입예제 > 에서다음을수정해주십시오. <annotationelements> <Image source=" maintainaspectratio="false" alpha="0.25"/> </ annotationelements> < 예제 63 차트앞면에이미지삽입한예제 > Image 의투명도가 1 이라면그래프가전혀보이지않기때문에 alpha 값을적절히조절해주십시오. 126/170

127 다음은 Image 객체의옵션설명입니다. 속성명설명 source 실제이미지가있는 URL 경로입니다. 이미지원본비율을유지할지어떨지를나타냅니다. 만약이속성이 true 라면차트고유비율을유지 maintainaspectration 하려합니다. 하지만가로이든세로이든차트에맞춰진모습을나타냅니다. false인경우차트에딱맞춰진사이즈를갖습니다. alpha 이미지의투명도를나타냅니다.( 유효값 : 0~1) < 표 20 Image 객체속성설명 > 7.5. 차트생성시효과적용하기. rmatecharth5 에서차트생성시출력되는이펙트는 SeriesInterpolate, SeriesSlide, SeriesZoom, SeriesClip 네가지가존재합니다. SeriesInterpolate : 초기값에서목표값까지의일련의데이터변동을이펙트로나타냅니다. SeriesSlide : 차트의시리즈가한방향에서반대방향으로미끄러지듯나타는이펙트입니다. SeriesZoom : 차트의한기준점을잡고서는해당기준점에서확대되어지는이펙트입니다. SeriesClip : 차트의위, 아래, 왼쪽, 오른쪽을기준으로커져나가보이는이펙트입니다. Line2DSeries, Area2DSeries 만지원하며 IE7, 8 은지원하지않습니다. 속성명 유효값 설명 적용가능한이펙트 effect 전체를완료하는데필요한 duration 밀리세컨드 ( 기본값 :500) 시간을 밀리 세컨드 단위로 지정합니다. elementoffset 밀리세컨드 ( 기본값 : 20) effect를지연시키는시간을밀리세컨드단위로지정합니다. 각엘리먼트의최소지속시간을공통설정합니다. 계열에포함되는어느 minimumelem 밀리세컨드 ( 기본값 : 0) 엘리먼트에대해서도, 이값 ( 밀리 entduration 세컨드 ) 보다짧은시간에 effect가 실행되지않습니다. offset 밀리세컨드 ( 기본값 : 0) effect 개시의지연시간을밀리세컨드단위로지정합니다 direction left right up down ( 기본값 : left) 슬라이딩해 오는 방향을 SeriesSlide 127/170

128 설정합니다. horizontalfocu s center left right ( 기본값 : center) 줌을시작하는수평의초점을정합니다. verticalfocus center top bottom ( 기본값 : center) 줌을시작하는수직의초점을정합니다. SeriesZoom relativeto chart series ( 기본값 : chart) 줌의초점을위한경계를정합니다. < 표 21 차트생성시효과 (Effect) 속성과유효값설명 > 다음과같이효과의설정이가능합니다. <rmatechart> <Column3DChart> <Column3DSeries yfield="profit"> <showdataeffect> <SeriesSlide duration="1000" // 구체적으로이펙트설정한경우.. direction="down" minimumelementduration="20" elementoffset="30"/> </showdataeffect> </Column3DSeries> <Column3DSeries yfield="cost"> <showdataeffect> < SeriesSlide /> // 기본값만적용하여이펙트설정한경우. </showdataeffect> </Column3DSeries> </rmatechart> < 예제 64 SeriesSlide 로이펙트설정한예제 > 위에작성한예제의이펙트는다음과같이실행됩니다. 각엘리먼트는전의엘리먼트의 30 밀리세컨드후에개시해, 각각의슬라이드를완료하는데 20 밀리세컨드가걸립니다. effect 전체에서는, 데이터계열이모두슬라이드할때까지 1 초 (1000 밀리세컨드 ) 걸립니다. 슬라이딩해오는방향은아래입니다 마우스오버시데이터팁 ( 툴팁 ) 나타내기. 128/170

129 데이터팁 ( 툴팁 ) 은모든차트 ( 칼럼, 바, 영역, 라인등등 ) 에서마우스오버시나타나게할수있습니다. 차트를나타내는노드의속성 showdatatips 를정의한후속성값으로 true 설정을합니다. 아래예는칼럼 3D 차트의마우스오버시나타나는데이터팁 ( 툴팁 ) 에관한예제입니다. showdatatips 속성은모든차트에동일한속성입니다 <rmatechart> <Options> <Caption text="annual Report"/> </Options> <Column3DChart showdatatips="true"> <horizontalaxis> <CategoryAxis categoryfield="month" title="month"/> </horizontalaxis> <series> <Column3DSeries yfield="profit displayname="profit"> <showdataeffect> <SeriesInterpolate/> </showdataeffect> </Column3DSeries>... </rmatechart>... < 마우스오버시모습 > < 예제 65 데이터팁 ( 툴팁 ) 예제 > showdatatips 를 true 로설정하고차트의시리즈속성 displayname 에텍스트를입력하면차트에마우스 오버시위와같이텍스트가함께출력됩니다. 예제는 Profit 이라는텍스트를입력하였기때문에 Profit 이출력되었습니다 칼럼차트스택형데이터간연결선잇기. 칼럼 2D, 3D 차트를스택형으로생성한경우각데이터간연결선을이을수있습니다. 이는 Column2DSeries 또는 Column3DSeries 의한속성인 linetoeachitems 를 true 로설정함으로써가능합니 다. alwayshowlines : 데이터 0 에대한선을그릴지그리지않을지정의합니다. 129/170

130 True - ( 기본값 ) 데이터가 0 이더라도선을그립니다. False 데이터가 0 이라면선을그리지않습니다. <Column2DChart showdatatips="true" type="stacked"> // 스택형으로정의 <horizontalaxis> <CategoryAxis categoryfield="month" /> </horizontalaxis> <series> // 연결선잇기 true 설정 <Column2DSeries yfield="profit" linetoeachitems="true" alwayshowlines= true > <linklinestroke> // 연결선의스타일정의 <Stroke weight="2" color="0x000000" caps="none" /> </linklinestroke> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Column2DSeries> <Column2DSeries yfield="cost" linetoeachitems="true" alwayshowlines= true > <linklinestroke> <Stroke weight="2" color="0x000000" caps="none" /> </linklinestroke> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Column2DSeries> <Column2DSeries yfield="revenue" linetoeachitems="true" alwayshowlines= true > <linklinestroke> <Stroke weight="2" color="0x000000" caps="none" /> </linklinestroke> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Column2DSeries> </series> </Column2DChart> < 예제 66 칼럼 2D 차트스택형데이터간연결선잇기예제 > 130/170

131 < 그림 49 칼럼 2D 차트스택형연결선이은모습 > 7.8. 차트아이템클릭시불려지는함수설정하기. 차트의아이템을클릭한경우해당아이템의정보를스크립트단으로보낼수있습니다. 이는자바스크립트의함수를설정하여그함수를호출하는방식으로다양한작업을가능케합니다. 먼저, 차트에게호출할함수명을지정해줘야합니다. 레이아웃 XML 에서차트의속성으로 itemclickjsfunction 을설정하고, 자바스크립트함수명을속성값으로할당합니다. 칼럼 3D 차트인경우 <Column3DChart/> 이며, 바차트인경우 <Bar3DChart/> 의속성입니다. 파이차트를예로들면아래와같습니다. 이는파이차트의파이한조각 ( 파이차트아이템 ) 을클릭한경우 chartclick 이라는함수를호출하겠다는이야기입니다. 이 chartclick 함수는자바스크립트에서반드시정의되어야합니다. <rmatechart cornerradius="12" borderstyle="solid"> <Options> <Caption text="anual Report" /> </Options> <Pie2DChart showdatatips="true" itemclickjsfunction="chartclick"> <series> <Pie2DSeries field="profit" namefield="month" displayname="profit"> <showdataeffect> <SeriesInterpolate/> </showdataeffect> </Pie2DSeries> </series> </Pie2DChart> </rmatechart> < 예제 67 차트클릭시자바스크립트함수호출하기 > 131/170

132 < 예제 67 차트클릭시자바스크립트함수호출하기 > 과같이차트레이아웃 XML 에서아이템클릭시 호출할함수를지정하였다면이제자바스크립트에서이함수명과동일한함수를정의하여야합니다. 예제는아래와같습니다. <html lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <script src="rmatecharth5.js" language="javascript"></script> <!-- 사용자정의설정시작 --> <script language="javascript" type="text/javascript"> // chartvars 설정시작 var chartvars; // 차트레이아웃 URL 경로. var layouturl = encodeuricomponent("chartlayout.xml"); chartvars += "&layouturl="+layouturl; // 데이타를 URL 경로를통해가져올경우설정하십시오. // 배열형태로데이터를삽입할경우주석처리나삭제하십시오. // 배열형태와같이사용할경우, 우선순위는배열형태데이터삽입입니다. var dataurl =encodeuricomponent("singledata.xml"); chartvars += "&dataurl="+dataurl; rmatecharth5.create("chart1", "chartholder", chartvars, "100%", "100%"); // chartvars 설정끝 // 챠트에서 item 클릭시불려지는함수설정 /* // layout XML 에서 Chart 속성을넣을때 itemclickjsfunction을주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <Column3DChart showdatatips="true" itemclickjsfunction="chartclick"> // // 파라메터설명 // seriesid : layout XML에서부여한 series의 id가있을경우, 해당 id를보내줍니다. // displaytext : 화면상에보여주는 datatip( 마우스오버시보여주는박스-tooltip) 의내용 // index : 클릭된 item( 막대나파이조각등 ) 의 index 번호 - 맨왼쪽또는맨위것이 0번입니다 // data : 해당 item의값을표현하기위해입력된 data( 입력된데이타중해당 row( 레코드 ) 자료입니다 ) // values : 해당 item의값 ( 배열로전달되며, 챠트종류에따라아래와같이들어옵니다.) Bar2D(3D)Series 0:x축값 1:y축값 132/170

133 Column2D(3D)Series 0:x축값 1:y축값 Area2DSeries 0:x축값 1:y축값 Bubble3DSeries 0:x축값 1:y축값 2:radius값 Line2DSeries 0:x축값 1:y축값 Pie2DSeries 0: 값 Candlestick2DSeries 0:x축값 1:open값 2:close값 3:high값 4:low값 Bar2D(3D)WingSeries 0:x축값 1:y축값 2:xOpp값 3:yOpp값 TreeMapSeries 0:weight값 1:text값 BoxPlotSeries 0:upper값 1:median값 2:lower값 3:min값 4:hidden값 Vector2DSeries 0:degree값 1:velocity 값, 2:meter값 WordCloudSeries 0:weight값 1:text값 */ function chartclick(seriesid, displaytext, index, data, values) { alert("seriesid:"+seriesid+"\ndisplaytext:"+displaytext+"\nindex:"+index+"\ndata:"+data+"\nvalues:"+valu es); } <!-- 사용자정의설정끝 --> </script> </head> <body> <div class="content"> <!-- 차트가삽입될 DIV --> <div id="chartholder" style="width:600px; height:400px;"> </div> </div> </body> </html> < 예제 68 차트클릭시호출하는함수자바스크립트에서정의하기 > < 예제 67 차트클릭시자바스크립트함수호출하기 > 를보시면자바스크립트에서정의한함수의파라 메터는 5 개가있습니다. 파라메터명파라메터설명 seriesid 레이아웃 XML에서부여한시리즈 (Series) 의 id가있을경우, 해당 id 입니다. displaytext 화면상에보여주는데이터팁 ( 툴팁, 마우스오버시나타나는팁 ) 입니다. 클릭한아이템 ( 막대나파이차트의조각 ) 의인덱스번호입니다. 맨왼쪽, 맨위쪽의값이 0 index 번입니다. data 해당 item의값을표현하기위해입력된 data 입니다. ( 입력된데이타중해당 row( 레코드 ) 133/170

134 자료입니다 ) 해당 item 의값입니다. ( 배열로전달되며, 챠트종류에따라아래와같이들어옵니다.) values Bar2DSeries(Bar3DSeries) 0 : x축값, 1 : y축값 Column2DSeries(Column3DSeries) 0 : x축값, 1 : y축값 Area2DSeries 0 : x축값, 1 : y축값 Bubble3DSeries 0 : x축값, 1 : y축값, 2: radius 값 Line2DSeries 0 : x축값, 1 : y축값 Pie2DSeries(Pie3DSeries) 0 : 값 Bar2DWingSeries(Column2DWingSeries) 0 : x축값, 1 : y축값, 2 : xopp 값, 3 : yopp값 Histogram2DSeries(Histogram3DSeries) 0 : x축값, 1 : y축값 TreeMapSeries 0 : weight값, 1 : name값 0 : upper 값, 1 : median 값, 2 : lower 값, BoxPlotSeries 3 : min값, 4 : hidden 값 Vector2DSeries 0 : degree값, 1 : velocity값, 2 : meter 값 WordCloudSeries 0 : weighr값, 1 : text 값 < 표 22 차트클릭시호출하는함수의파라메터설명 > 지금까지파이차트의한아이템을클릭한경우자바스크립트의 chartclick 함수를호출하게 설정하였습니다. 이에대한실행화면으로자바스크립트에서알림창을띄워차트로부터넘어온파라메터를 보여주고있습니다. < 그림 50 파이차트클릭시함수호출실행화면 > 7.9. 사용자정의함수설정하기 사용자정의함수를설정할수있는경우는총 3 가지가존재합니다. 134/170

135 1. 데이터팁사용자정의 2. 축라벨사용자정의 ( 축에직접정의, 축렌더러에정의 ) 3. 칼럼, 바, 파이계열차트의수치필드사용자정의 자바스크립트함수를정의하고레이아웃에그함수명을지시하여차트가해당함수를호출하는원리로사용자정의함수가적용됩니다. 축라벨, 수치필드 ( 데이터팁제외 ) 를사용자정의할때반드시 formatter 속성과함께사용하지마십시오. formatter 는기본적인사용자정의함수입니다. formatter 속성과 labeljsfunction 속성을함께정의한경우정상적인차트를생성할수없습니다 데이터팁 ( 툴팁 ) 함수사용자정의. 챠트에서 showdatatips="true" 설정후마우스오버시보이는데이터팁를사용자정의할수있습니다. 차트에서마우스오버이벤트가발생하면레이아웃에서미리지정된 datatipjsfunction 함수를호출하여그함수가리턴하는값을데이터팁으로표시하게됩니다. 레이아웃 XML 에서 datatipjsfunction 속성을추가하고속성값으로자바스크립트함수명을지정하십시오. 이자바스크립트함수는차트아이템에마우스오버시 rmate 차트가호출할콜백함수입니다. 다음예제는칼럼 3D 차트의데이터팁을사용자정의한레이아웃예제입니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text="anual Report"/> </Options> <!-- datatipfunc 는자바스크립트함수명입니다. --> <Column3DChart showdatatips="true" datatipjsfunction="datatipfunc"> <horizontalaxis> <CategoryAxis categoryfield="month" displayname=" 날짜 "/> </horizontalaxis> <series> <Column3DSeries id="series1" yfield="profit" displayname="profit"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Column3DSeries> <Column3DSeries id="series2" yfield="cost" displayname="cost"> <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Column3DSeries> <Column3DSeries id="series3" yfield="revenue" displayname="revenue"> 135/170

136 <showdataeffect> <SeriesInterpolate /> </showdataeffect> </Column3DSeries> </series> </Column3DChart> </rmatechart> < 예제 69 데이터팁사용자정의레이아웃예제 > 레이아웃에서자바스크립트콜백함수를등록한후 rmate 차트를임베딩하는파일, 예를들면 html, jsp, php 파일에서다음과같이콜백함수를실제로정의하십시오. // 챠트에서 showdatatips="true" 설정후마우스오버시보이는데이터팁정의 // layout XML 에서 Chart 속성을넣을때 datatipjsfunction를주고, 만든 javascript 함수명을넣어줍니다 // 예 ) <Column3DChart showdatatips="true" datatipjsfunction를 ="datatipfunc"> // 파라메터설명 // seriesid : layout XML에서부여한 series의 id가있을경우, 해당 id를보내줍니다. // seriesname : 시리즈의 displayname 으로정의한시리즈이름을보내줍니다. // xname : X 축에 displayname 을정의하였다면 X축의 displayname을보내줍니다. // yname : Y 축에 displayname 을정의하였다면 Y축의 displayname을보내줍니다. // data : 해당 item의값을표현하기위해입력된 data( 입력된데이타중해당 row( 레코드 ) 자료입니다 ) // values : 해당 item의값 ( 배열로전달되며, 챠트종류에따라아래와같이들어옵니다.) Bar2D(3D)Series 0:x축값 1:y축값 Column2D(3D)Series 0:x축값 1:y축값 Area2DSeries 0:x축값 1:y축값 Bubble3DSeries 0:x축값 1:y축값 2:radius값 Line2DSeries 0:x축값 1:y축값 Pie2D(3D)Series 0: 값 1: 퍼센트값 2:nameFiled명 Candlestick2DSeries 0:x축값 1:open값 2:close값 3:high값 4:low값 Bar2D(3D)WingSeries 0:x축값 1:y축값 2:xOpp값 3:yOpp값 TreeMapSeries 0:weight값 1:text값 BoxPlotSeries 0:upper값 1:median값 2:lower값 3:min값 4:hidden값 Vector2DSeries 0:degree값 1:velocity 값, 2:meter값 WordCloudSeries 0:weight값 1:text값 */ function datatipfunc(seriesid, seriesname, index, xname, yname, data, values){ return "<font color='#cc3300'> 데이터팁사용자정의 </font>\nseriesid:"+seriesid +"<br/><font color='#0000ff'> 현재데이터 : </font>" +"<b>"+seriesname+"</b>"+"\nitemindex:"+index +"<br/><font color='#0000ff'>xdisplayname : </font>"+"<b><font size='11'>"+xname+"</font></b>" +"<br/><font color='#0000ff'>ydisplayname : </font>"+"<b><font size='11'>"+yname+"</font></b>" +"<br/>data:"+data+"<br/>values:"+values; 136/170

137 } < 예제 70 자바스크립트데이터팁콜백함수예제 > 다음은자바스크립트콜백함수를정의할때함께정의되어야할함수파라메터에대한설명입니다. 파라메터명파라메터설명 seriesid 레이아웃 XML에서부여한시리즈 (Series) 의 id가있을경우, 해당 id 입니다. seriesname 화면상에보여주는데이터팁 ( 툴팁, 마우스오버시나타나는팁 ) 입니다. 클릭한아이템 ( 막대나파이차트의조각 ) 의인덱스번호입니다. 맨왼쪽, 맨위쪽의값 index 이 0 번입니다. xname X축에 displayname을정의하였을경우나타나는 X축이름입니다. yname Y축에 displayname을정의하였을경우나타나는 Y축이름입니다. 해당 item의값을표현하기위해입력된 data 입니다. ( 입력된데이타중해당 row( 레 data 코드 ) 자료입니다 ) 해당 item의값입니다. ( 배열로전달되며, 챠트종류에따라아래와같이들어옵니다.) Bar2DSeries(Bar3DSeries) 0 : x축값, 1 : y축값 Column2DSeries(Column3DSeries) 0 : x축값, 1 : y축값 Area2DSeries 0 : x축값, 1 : y축값 Bubble3DSeries 0 : x축값, 1 : y축값, 2: radius 값 Line2DSeries 0 : x축값, 1 : y축값 Pie2DSeries(Pie3DSeries) 0 : 값 1: 퍼센트값 2:nameField values 0 : x축값, 1 : y축값, 2 : xopp 값, 3 : Bar2DWingSeries(Column2DWingSeries) yopp값 Histogram2DSeries(Histogram3DSeries) 0 : x축값, 1 : y축값 TreeMapSeries 0 : weight값, 1 : name값 0 : upper 값, 1 : median 값, 2 : lower 값, BoxPlotSeries 3 : min값, 4 : hidden 값 Vector2DSeries 0 : degree값, 1 : velocity값, 2 : meter 값 WordCloudSeries 0 : weighr값, 1 : text 값 < 표 23 데이터팁사용자정의콜백함수파라메터설명 > 137/170

138 < 그림 51 데이터팁사용자정의실행모습 > 축라벨사용자정의 X, Y 축이존재하는데카르트좌표계열차트의축에표시되는라벨값사용자정의는 X 축, Y 축에해당되는해당축노드에 labeljsfunction 속성을정의하고자바스크립트콜백함수명을지정합니다. 축라벨사용자정의는축에직접하는방법과축렌더러에정의하는방법이있습니다. 적용방법은두가지가같습니다. 축렌더러에정의한콜백함수가늦게호출됩니다. 다음은 X 축라벨을사용자정의하기위해설정한레이아웃예제입니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text="anual Report"/> </Options> <Column3DChart showdatatips="true"> <horizontalaxis> <!-- axislabelfunc 는자바스크립트함수명입니다. --> <CategoryAxis categoryfield="month" displayname=" 날짜 " labeljsfunction="axislabelfunc"/> </horizontalaxis> <verticalaxis> <LinearAxis displayname=" 금액 "/> </verticalaxis> </Column3DChart> 138/170

139 </rmatechart> < 예제 71 축라벨사용자정의레이아웃예제 > /* // X축라벨사용자정의함수 // X, Y 축이존재하는데카르트좌표계열챠트에서축라벨을사용자정의합니다. // layout XML 에서축렌더러속성을넣을때 labeljsfunction 주고, 만든 javascript 함수명을넣어줍니다 // 예 )<horizontalaxis> // <CategoryAxis id="haxis" categoryfield="month" labeljsfunction="axislabelfunc" /> // </horizontalaxis> // // 파라메터설명 // id : 축의 ID // value : 현재아이템에맞는축의라벨값 */ function axislabelfunc(id, value) { return value + ", 2009"; } < 예제 72 축라벨자바스크립트콜백함수정의예제 > < 예제 73 축라벨사용자정의실행화면 > 수치필드사용자정의 수치필드를표시할수있는칼럼, 바, 파이차트계열에서수치필드를사용자정의하고자하는경우해당 Series 노드에 labeljsfunction 속성을추가한후자바스크립트함수명을속성값으로지시하십시오. 139/170

140 다음은칼럼 2D 차트에수치필드를사용자정의한레이아웃예제입니다. <series> <!-- serieslabelfunc 는자바스크립트함수명입니다. --> <Column2DSeries yfield="profit" displayname="profit" labelposition="outside" stylename="seriesstyle" outsidelabeljsfunction="serieslabelfunc"> <showdataeffect> <SeriesInterpolate/> </showdataeffect> </Column2DSeries> </series> < 예제 74 수치필드사용자정의레이아웃예제 > /* // 수치필드사용자정의함수 // 칼럼, 바챠트에서 labelposition 속성을설정한경우수치필드를사용자정의하는함수입니다. // layout XML 에서 Series 속성을넣을때 labeljsfunction 주고, 만든 javascript 함수명을넣어줍니다 // // 예 ) <Column2DSeries yfield="profit" labelposition="outside" outsidelabeljsfunction="serieslabelfunc"> // // 파라메터설명 // seriesid : 해당시리즈의 id // index : 해당아이템의인덱스. // data : 해당 item의값을표현하기위해입력된 data( 입력된데이타중해당 row( 레코드 ) 자료입니다 ) // values : 해당 item의값 ( 배열로전달되며, 챠트종류에따라아래와같이들어옵니다.) Bar2D(3D)Series 0:x축값 1:y축값 Column2D(3D)Series 0:x축값 1:y축값 Pie2D(3D)Series 0: 값 1: 퍼센트값 Bubble3DSeries 0:x축값 1:y축값 2:z축값 Candlestick2DSeries 0:x축값 1:open값 2:close값 3:high값 4:low값 Bar2D(3D)WingSeries 0:x축값 1:y축값 2:xOpp값 3:yOpp값 TreeMapSeries 0:weight값 1:text값 BoxPlotSeries 0:upper값 1:median값 2:lower값 3:min값 4:hidden값 Vector2DSeries 0:degree값 1:velocity 값, 2:meter값 WordCloudSeries 0:weight값 1:text값 // 참고 : 수치필드사용자정의시엔 <br/> 태그와같은 html형식의코딩삽입이불가능합니다. */ function serieslabelfunc(seriesid, index, data, values) { return "$"+values[1]; } 140/170

141 < 예제 75 수치필드자바스크립트콜백함수예제 > 시리즈명 Column2DSeries Column3DSeries, Bar2DSeries, Bar3DSeries, Column2DWingSeries, Bar2DWingSeries Line2DSeries, Area2DSeries Bubble3DSeries Pie2DSeries, Pie3DSeries 수치사용자정의함수명 insidelabeljsfunction, outsidelabeljsfunction uplabeljsfunction, downlabeljsfunction insidelabeljsfunction labeljsfunction < 표 24 시리즈별 labeljsfunction 명 > 위 labeljsfunction 은 labelposition 의영향을받습니다. 다음은자바스크립트콜백함수를정의할때함께정의되어야할함수파라메터에대한설명입니다. 파라메터명파라메터설명 seriesid 해당시리즈의 id 입니다. 아이템 ( 막대나파이차트의조각 ) 의인덱스번호입니다. 맨왼쪽, 맨위쪽의값이 0 번 index 입니다. 해당 item의값을표현하기위해입력된 data 입니다. ( 입력된데이타중해당 row( 레 data 코드 ) 자료입니다 ) 해당 item의값입니다. ( 배열로전달되며, 챠트종류에따라아래와같이들어옵니다.) BarSeries(Bar3DSeries) 0 : x축값, 1 : y축값 ColumnSeries(Column3DSeries) 0 : x축값, 1 : y축값 Pie2DSeries(Pie3DSeries) 0 : 값 1: 퍼센트값 0 : x축값, 1 : open값, 2 : close값 Candlestick2DSeries values 3 : high 값, 4 : low값 Column2D(Bar2D)WingSeries 0 : x축값, 1 : y축값, 2 : xopp 값, 3 : yopp 값 TreeMapSeries 0 : weight 값, 1 : text 값 0 : upper 값, 1 : median 값, 2 : lower 값 BoxPlotSeries 3 : min 값, 4 : hidden 값 Vector2DSeries 0 : degree 값, 1 : velocity 값, 2 : meter 값 WordCloudSeries 0 : weight 값, 1 : text 값 < 표 25 수치필드콜백함수파라메터설명 > 141/170

142 < 그림 52 수치필드사용자정의화면 > 채우기색사용자정의 차트의채우기색 (fill) 을어떤조건에따라또는기호에맞게사용자정의하고하는경우해당 Series 노 드에 filljsfunction 속성을추가한후자바스크립트함수명을속성값으로지시하십시오. 다음은칼럼 3D 차트의채우기색을사용자정의한레이아웃예제입니다. <Column3DChart showdatatips="true" gutterleft="0" showlabelvertically="true"> <series> <Column3DSeries yfield="profit" filljsfunction="filljsfunc" stylename="seriesstyle"> <showdataeffect> <SeriesSlide direction="up" duration="1000"/> </showdataeffect> </Column3DSeries> </series> </Column3DChart> < 예제 76 채우기색사용자정의레이아웃 > 다음은 html, jsp, php, asp 등의스크립트파일에서정의한자바스크립트예제입니다. /* // 채우기색사용자정의함수 // // 차트의채우기색을특정조건에따라지정하는사용자정의함수입니다. 142/170

143 //layout XML 에서 Series 속성을넣을때 filljsfunction 을주고, 만든 javascript 함수명을넣어줍니다. // // 예 ) <Pie2DSeries field="profit" filljsfunction="filljsfunc"> // // 파라메터설명 //seriesid : 해당시리즈의 id //index : 해당아이템의인덱스. //data : 해당 item의값을표현하기위해입력된 data( 입력된데이타중해당 row( 레코드 ) 자료입니다 ) //values : 해당 item의값 ( 배열로전달되며, 차트종류에따라아래와같이들어옵니다.) Bar2D(3D)Series 0:x축값 1:y축값 Column2D(3D)Series 0:x축값 1:y축값 Area2DSeries 0:x축값 1:y축값 Bubble3DSeries 0:x축값 1:y축값 2:radius값 Line2DSeries 0:x축값 1:y축값 Pie2D(3D)Series 0: 값 1: 퍼센트값 2:nameField명 Column2D(Bar2D)WingSeries 0 : x축값, 1 : y축값, 2 : xopp값, 3 : yopp값 Candlestick2DSeries 0 : x축값, 1 : open값, 2 : close값 3: high값 4 : low값 TreeMapSeries 0 : weight값, 1 : text 값 BoxPlotSeries 0 : upper값, 1 : median값, 2 : lower값, 3 : min값, 4 : hidden값 Vector2DSeries 0 : degree값 1 : velocity 값 2 : meter 값 WordCloudSeries 0 : weight 값 1 : text 값 // From-To Chart 에서 minfield 를지정했다면 values 의마지막인덱스값에 minfield 값이들어옵니다. */ function filljsfunc(seriesid, index, data, values) { if(values[1] > 2000) return "0xFF3366"; else if(values[1] > 1000) return "0xFFFF33"; else return "0xFF9999"; } < 예제 77 채우기색자바스크립트콜백함수예제 > 143/170

144 < 그림 53 채우기색사용자정의화면 > 차트안범위지정및다수의선긋기 상하한선은 min/max 를잡아영역을칠하고선을긋는반면차트안범위지정및선긋기는범위지정 및선을긋는데제한이없습니다. 예로아래그럼처럼다수의선을긋고영역표시를할수있습니다. < 그림 54 차트안범위지정및다수의선긋기 > 위를표현하기위한노드는다음과같습니다. 차트의 backgroundelements 또는 annotationelements 속성 선이나범위를차트아래에표현하고자하는경우는 backgroundelements, 차트위에나태내고자하는경우 annotationelements 속성을사용합니다. AxisMarker AxisLine 과 AxisRange 를표현할수있는대표자입니다. 144/170

145 AxisLine 라인을표현할수있습니다. AxisRange 영역을표현할수있습니다. 실제로차트에영역과라인을표현하는레이아웃샘플입니다. <rmatechart backgroundcolor="0xffffff"> <Stroke id="stroke1" color="0xff0000" weight="1"/> <Line2DChart showdatatips="true">... // 차트의배경에표시하고있음. <backgroundelements> <GridLines/> // 선과영역포함하여차트그리드도출력하기위함 <AxisMarker> // 선과영역을포현할수있는대표자선언 <lines> // 라인을긋고자함 // AxisLine 을 3개정의하여 3개의라인을그음. <AxisLine value="1000" label="label 01" stroke="{stroke1}" labelupdown="up" color="0xff0000"/> <AxisLine value="1500" label="label 02" stroke="{stroke1}" labelalign="left" labelupdown="down" color="0xff0000"/> <AxisLine value="2000" label="label 03" stroke="{stroke1}" labelupdown="up" labelalign="left" labelrotation="90" color="0xff0000"/> </lines> <ranges> // 영역을표현하고자함. //AxisRange 2개정의하여 2개의범위지정 <AxisRange startvalue="1000" endvalue="2000" label=" 영역1" fontsize="11" labelhorizontalalign="left" color="0xff00ff"> <fill> <SolidColor color="0x00ff99" alpha="0.2"/> </fill> </AxisRange> <AxisRange startvalue="mar" endvalue="may" label=" 영역2" fontsize="11" labelverticalalign="bottom" color="0x0066ff" horizontal="false"> <fill> <SolidColor color="0x0099ff" alpha="0.2"/> </fill> 145/170

146 </AxisRange> </ranges> AxisMarker> </backgroundelements> </Line2DChart> </rmatechart> 다음은해당노드들의속성및유효값설명입니다. 속성명유효값설명 lines AxisLine 노드차트에표현할라인들을정의합니다. ranges AxisRange 노드차트에표현할영역들을정의합니다. AxisRange 와 AxisLine 은기본적으로라벨을출력시킵니다. 따라서 Caption 의속성을모두포함하고있 습니다. 아래표는 Caption 의속성부분은제외합니다. 이에대한속성설명은 차트제목 (Caption), 부제목 (SubCaption) 넣기. 를참고하여주십시오. AxisLine - 속성명 유효값 설명 라인에표시할라벨의수평정렬. center,left,right labelalign 속성 horizontal이 false일경우 left는 top, right는 ( 기본값 :right) bottom의기능을합니다 라벨을라인의위에표시할지아래에표시할지여부. labelupdown up,down ( 기본값 :up) 속성 horizontal이 false일경우 up은우측, down은좌측에위치시킵니다. labelrotation 0~360( 기본값 :0) 표시할라벨의회전. Embeded폰트를사용할경우에는모든각도가능하나시스템폰트를사용할경우에는 0만가능합니다. lineposition center, left, right CategoryAxis의경우라인을표시할위치. CategoryAxis에서는한개의값에대한선을그을수있는위치가여러개가가능하여선택할수있도록합니다. stroke Stroke 객체 라인의스타일을설정합니다. startvalue Number,String 표시하는선이사선일경우라인이시작되는위치값. value값이설정되면이값은무시됩니다. endvalue Number,String 표시하려는선이사선일경우라인이끝나는위치 146/170

147 값. value 값이설정되면이값은무시됩니다. Value Number,String 표시하려는선이사선이아닌경우라인이표시될값. 이값이설정되면 startvalue, endvalue값은무시됩니다. label String 선에표시할텍스트를정의하십시오. < 표 26 AxisLine 속성및유효값설명 > AxisRange - 속성명유효값설명 labelhorizontalalign String( center,left,right ) 범위에표시할라벨의수평정렬입니다. labelverticalalign String( top,middle,bottom ) 범위에표시할라벨의수직정렬입니다. 표시할라벨의회전각도입니다. labelrotation Number Embeded 폰트를사용할경우에는모든각도가능하 나시스템폰트를사용할경우에는 0, 90 만가능합니 다. fill Uint 범위안을채울색상을지정합니다. startvalue Number, String 표시하려는범위의위치시작값. endvalue Number, String 표시하려는범위의위치종료값. 수평범위여부. 수평범위 (true) 이면세로축을기준으로범위를그리게 horizontal Boolean( true, false ) 되며 false 이면수직범위를그리게됩니다. true 이면수직좌표의값이들어가야하며 false 이면수평좌표의값이들어가야합니다. label String 범위안에넣을텍스트를정의하십시오. < 표 27 AxisRange 속성및유효값설명 > 확대 / 축소와마우스이동에따른십자가표시하기 확대 / 축소및십자기표시기능은아래리스트를제외한모든차트에서사용가능합니다. 147/170

148 레이더차트 파이, 도넛차트 히스토리, 스크롤차트 게이지차트 확대 / 축소와십자가표시는 CrossRangeZoomer 노드의정의로사용이가능합니다. 다음과같이레이아웃을작성하고차트의 annotationelements 속성에 CrossRangeZoomer 를설정하십시오. <rmatechart> <Combination2DChart showdatatips="true"> <series> <Line2DSeries yfield="profit" displayname="profit"/> </series> <annotationelements> <CrossRangeZoomer zoomtype="horizontal" fontsize="11" color="0x00000" verticallabelplacement="bottom" enablezooming="true" enablecrosshair="true"> <zoomrangestroke> <Stroke weight="1" color="0xff0000" alpha="0.3"/> </zoomrangestroke> <zoomrangefill> <SolidColor color="0x0000ff" alpha="0.2"/> </zoomrangefill> </CrossRangeZoomer> </annotationelements> </Combination2DChart> </rmatechart> < 예제 78 확대 / 축소및십자가표시예제 > 속성 유효값 설명 horizontalstroke Stroke 객체 십자가의가로선을지정합니다. verticalstroke Stroke 객체 십자가의세로선을지정합니다. zoomrangestroke Stroke 객체 줌영역의선스타일을지정합니다. zoomrangefill SolidColor 객체 줌영역의채우기색을지정합니다. horizontallabelformatter horizontallabeloppformatter horizontallabelplacement 포매터 id 포매터 id left right( 기본값 :left) 십자가의가로선에나타나는라벨에적용할포맷터. 십자가의가로선, 오른쪽에나타나는라벨에적용할포맷터 (usedualcrossxlabel= true 인경우유효 ) 십자가의가로선라벨의위치를나타냅니다. left일경우 Chart 왼쪽에 right일경우오른쪽에 148/170

149 좌표값이표시됩니다. true false 십자가의라벨에표시되는좌표값출력여부입니 showvaluelabels ( 기본값 :true) 다. ( 현재마우스가위치한값표시여부.) 십자가의세로선에나타나는라벨에적용할포맷 verticallabelformatter 포매터 id 터. 십자가의세로선, 윗쪽에나타나는라벨에적용할 verticallabeloppformatter 포매터 id 포맷터 (usedualcrossylabel= true 인경우유효 ) 십자가의세로선라벨의위치를나타냅니다. top bottom verticallabelplacement top일경우 Chart 위에 bottom일경우아래에좌 ( 기본값 :bottom) 표값이표시됩니다. 수직축을 2개이상설정한경우 2개의축에대하여라벨을표시할지여부를나타냅니다. 즉, usedualcrossxlabel 를 true 로설정한경우, false true usedualcrossxlabel 수직축에해당되는라벨이축위치에맞게표시됩 ( 기본값 :false) 니다. (horozontallabelplacement 속성은무시됨 ) 예를들어수직축을 3개설정하였다면앞에서 2개의축에대한라벨만표시됩니다. 수평축을 2개이상설정한경우 2개의축에대하여라벨을표시할지여부를나타냅니다. 즉, usedualcrossylabel 를 true 로설정한경우, false true usedualcrossylabel 수평축에해당되는라벨이축위치에맞게표시됩 ( 기본값 :false) 니다. (verticallabelplacement 속성은무시됨 ) 예를들어수평축을 3개설정하였다면앞에서 2개의축에대한라벨만표시됩니다. 마우스포인터를기준으로십자가사용여부를나 enablecrosshair 타냅니다. enablezooming Chart의 Zoom 기능사용여부를나타냅니다. Chart의 Zoom 기능사용시 zoom 기능을수직축, 수평축, 모두에적용할지를지정합니다. horizontal, vertical, 예를들어 zoomtype 을 "horizontal" 로지정하고 zoomtype both zoom in 을수행했다면수직축에대해서는 zoom ( 기본값 :both) in 을적용하지않고수평축에대해서만기능을수행합니다. 줌기능에서 Restore 실행방식을결정합니다. initial 인경우사용자에의해결정된최초의 initial, auto( 기본값 : resetmode minimum, maximum 값을유지하고, auto 인경우 auto) 차트에의해 minimum, maximum 이정해집니다. 개발자에의해축의 minimum, maximum 설정값 149/170

150 이유지되도록하기위해서는 initial 값을할당하세 요. < 표 28 CrossRangeZoomer 속성및유효값설명표 > 차트안에메모표시하기. 차트안에메모표시는특정데이터기준이아닌차트안쪽의 x,y 좌표계를이용하여메모를표시하게됩니다. 차트위에메모를출력하려면차트의 annotationelements 속성을, 차트밑에메모를출력하려면 backgroundelements 속성을사용하십시오. 본문의예제는차트위에메모를표시해보도록하겠습니다. <rmatechart> <Line2DChart showdatatips="true"> <series>... 라인시리즈설정부분중략 </series> <annotationelements> <CanvasElement> <! 그룹으로설정할라벨들을묶습니다. <! 라벨 1 <Label left="0" top="20" width="200" height="20" color="0x0000ff" fontsize="15" textalign="center" text=" 텍스트쓰기 1( 왼쪽 )" backgroundalpha="0" borderstyle="solid" bordercolor="0xff0000"> </Label> <! 라벨 2 <Label width="200" height="40" color="0x0000ff" fontsize="15" textalign="center" verticalcenter="0" horizontalcenter="0" text=" 텍스트쓰기 2 ( 차트중앙표시 )" backgroundcolor="0xffff00" backgroundalpha="0.2" borderstyle="solid" bordercolor="0xff0000"> </Label> <! 라벨 3 <Label right="0" bottom="0" height="40" color="0xff0000" fontsize="15" textalign="center" text=" 텍스트쓰기 3( 오른쪽 )" backgroundalpha="0" borderstyle="none"> </Label> <Label left="50" top="100" height="40" color="0x009966" fontsize="12" textalign="center" text=" 임의의 X,Y 좌표 (50,100) 에표시 " backgroundalpha="0" borderstyle="none"> </Label> </CanvasElement> 150/170

151 </annotationelements> </Line2DChart> </rmatechart> < 예제 79 차트안에메모표시예제 > 위처럼정의한메모들이출력된모습은아래와같습니다. < 그림 55 차트안에메모표시한모습 > 라벨의속성및유효값에대한설명은 차트제목 (Caption), 부제목 (SubCaption) 넣기. 를참고하여주십시오. 다음은라벨의고유속성 ( 즉, 제목, 부제목속성이아닌라벨속성 ) 을나타낸표입니다. 속성 유효값 설명 backgroundcolor RGB 컬러 바탕의색을지정합니다. backgroundalpha 0~1 실수 바탕색투명도를지정합니다. bordercolor RGB 컬러 테두리선색깔을지정합니다. borderalpha 0~1 실수 테두리선투명도를지정합니다. borderthickness Number( 픽셀단위 ) 테두리두께를지정합니다. cornerradius Number 테두리코너를둥그렇게합니다. borderstyle solid, none 테두리선을넣을지결정합니다. < 표 29 차트에라벨표시속성유효값및설명 > 라인차트에서수직선으로데이터출력하기. 라인차트는기본적으로수평축을수치데이터로삼고수평방향으로선그래프가진행되는방식입니다. 라인차트의선이수직방향으로수치데이터를표현하고자할때는다음과같이하십시오. 151/170

152 Line2DChart 의 horizontalaxis 의카테고리축을 verticalaxis 로변경하십시오. Line2DSeries 의 xfield 와 yfield 의값을반대로하십시오. Line2DSeries 의 sortonxfield 를 false 로설정합니다. <rmatechart> <Line2DChart> <verticalaxis> <CategoryAxis categoryfield="month"/> </verticalaxis> <series> <Line2DSeries xfield="profits" yfield="month" sortonxfield="false" displayname="profits"> </Line2DSeries> <Line2DSeries xfield="costs" yfield="month" sortonxfield="false" displayname="costs"> </Line2DSeries> <Line2DSeries xfield="revenue" yfield="month" sortonxfield="false" displayname="revenue"> </Line2DSeries> </series> </Line2DChart> </rmatechart> < 예제 80 라인차트에데이터수직으로출력예제 > 동적으로차트레이아웃또는데이터변경하기. 때때로이미출력된차트의데이터를동적으로변경시키거나칼럼차트로표현된데이터를라인차트나바차트로표현해야할경우가있습니다. 이런경우 rmate 차트는웹페이지를갱신하지않고동적으로차트에데이터나레이아웃을변경시킬수있습니다. 아래예제는기본적으로데이터 1 을라인차트로출력합니다. Html 문서안의스크립트에서만든버튼으로칼럼차트로데이터 1 을표현하거나데이터 2 를표 152/170

153 현하는방법을나타낸예제입니다. rmatecharth5 js 파일은생성하고하는차트에맞는 js 파일을선택해 야합니다. 그러나이와같이동적으로레이아웃을변경하였을때그에맞는차트를생성해야하기때문 에 rmateintegrationh5.js 를활용합니다. 통합차트는모든차트를생성할수있습니다. < 그림 56 동적으로레이아웃을바꿔출력한결과 > 동적으로바뀌는차트를작성하는방법을제시한 html 문서는아래와같습니다. <html lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <script src="rmatecharth5.js" language="javascript"></script> <!-- 사용자정의설정시작 --> <script language="javascript" type="text/javascript"> // 차트 chartvars 설정시작 // rmate 차트생성준비가완료된상태시호출할함수를지정합니다. var chartvars = "&rmateonloadcallfunction=rmatechartonload"; // 차트 chartvars 설정끝 // rmatechart 를생성합니다. rmatecharth5.create("chart1", "chartholder", chartvars, "100%", "100%"); // rmate 차트준비가완료된경우이함수가호출됩니다. // 사용자는이함수를 chartvars에반드시등록해야합니다. // 여기서작업을하십시오. // 차트콜백함수 4개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setlayouturl - 레이아웃 XML 경로를지시합니다. // 4. setdataurl - 데이터 XML 경로를지시합니다. 153/170

154 // 아래예제는가능한방법을제시한것입니다. // 현제 2번차트는레이아웃을스트링형태로받아들이고데이터는배열형태로받아들입니다. function rmatechartonload() { // 예제1. 레이아웃스트링형태, 데이터배열형태 chart.setlayout(layoutstr); chart.setdata(chartdata); // 예제 2. 레이아웃 XML URL 경로, 데이터배열형태 //chart.setlayouturl(layouturl); //chart.setdata(chartdata); // 예제 3. 레이아웃스트링형태, 데이터 XML URL 경로 //chart.setlayout(layoutstr); //chart.setdataurl(dataurl); } // 예제 4. 레이아웃 URL, 데이터 URL //chart.setlayouturl(layouturl); //chart.setdataurl(dataurl); // 동적으로할당할레이아웃정의. var layouturl = "./LayoutXml/Column_3D_Layout.xml"; var layoutstr = '<rmatechart cornerradius="12">' +'<Options>' +'<Caption text="annual Report"/>' +'</Options>' +'<NumberFormatter id="numfmt" usethousandsseparator="true"/>' +'<Line2DChart showdatatips="true">' +'<horizontalaxis>' +'<CategoryAxis categoryfield="month"/>' +'</horizontalaxis>' +'<verticalaxis>' +'<LinearAxis interval="3000" formatter="{numfmt}"/>' +'</verticalaxis>' +'<series>' +'<Line2DSeries yfield="profit" displayname="profit" itemrenderer="circleitemrenderer" radius="5">' +'<showdataeffect>' +'<SeriesInterpolate/>' +'</showdataeffect>' +'</Line2DSeries>' +'</series>' +'</Line2DChart>' 154/170

155 +'</rmatechart>' var chartdata = [{"Month":"Jan", "Revenue":10000, "Cost":5000, "Profit":5000}, {"Month":"Feb", "Revenue":15000, "Cost":7000, "Profit":8000}, {"Month":"Mar", "Revenue":12000, "Cost":6000, "Profit":6000}, {"Month":"Apr", "Revenue":30200, "Cost":4000, "Profit":26200}, {"Month":"May", "Revenue":28000, "Cost":10000, "Profit":18000}, {"Month":"Jun", "Revenue":12000, "Cost":5000, "Profit":7000}, {"Month":"Jul", "Revenue":22000, "Cost":10000, "Profit":12000}, {"Month":"Aug", "Revenue":13000, "Cost":6000, "Profit":7000}, {"Month":"Sep", "Revenue":22000, "Cost":10000, "Profit":12000}, {"Month":"Oct", "Revenue":29000, "Cost":8000, "Profit":21000}, {"Month":"Nov", "Revenue":18000, "Cost":7500, "Profit":10500}, {"Month":"Dec", "Revenue":30000, "Cost":12000, "Profit":18000} ]; // 레이아웃변경함수 function changelayout() { chart.setlayouturl(layouturl); } // 레이아웃변경함수. function changelayout3() { chart.setlayout(layoutstr); } </script> <!-- 사용자정의설정끝 --> </head> <body> <table> <tr> <td> <div class="button button_top" onclick="changelayout()"> 컬럼차트로표현 </div> <div class="button button_top" onclick="changelayout3()"> 라인차트로표현 </div> </td> </tr> <tr> <td> <div class="content"> <!-- 차트가삽입될 DIV --> <div id="chartholder" style="width:600px; height:400px;"> 155/170

156 </td> </tr> </table> </body> </html> </div> </div> < 예제 81 동적으로차트레이아웃과데이터를변경시키는예제 > 하나의 html 문서안에여러개의차트를생성하기 Html 문서한페이지에여러개의차트를생성하고자할때는아래예제를참고하세요. 아래예제는한 페이지에 2 개의차트를생성시키는방법을제시합니다. < 그림 57 하나의 html 문서에서 2 개의차트생성결과 > 이예제는라인차트와칼럼차트를생성시키는예제입니다. 모든차트를생성시킬수있는 rmateintegration.js 를활용하십시오. 라인과칼럼차트는기본적인차트이므로 rmatechart.js 를사용하셔 도무관합니다. <html lang="ko"> <head> <meta http-equiv="content-type" content="text/html; charset=euc-kr" /> <script src="rmatecharth5.js" language="javascript"></script> 156/170

157 <!-- 사용자정의설정시작 --> <script language="javascript" type="text/javascript"> // 첫번째차트 chartvars 설정시작 var chartvars = "&rmateonloadcallfunction=rmatechartonload"; // 첫번째차트 chartvars 설정끝 // 두번째차트 chartvars 설정시작 var chartvars2 = "&rmateonloadcallfunction=rmatechartonload2"; // 두번째차트 chartvars 설정끝 // rmatechart 를생성합니다. rmatecharth5.create("chart1", "chartholder", chartvars, "100%", "100%"); rmatecharth5.create("chart2", "chartholder2", chartvars2, "100%", "100%"); // rmate 차트준비가완료된경우이함수가호출됩니다. // 사용자는이함수를 chartvars에반드시등록해야합니다. // 여기서작업을하십시오. // 차트콜백함수 4개존재합니다. // 1. setlayout - 스트링으로작성된레이아웃 XML을삽입합니다. // 2. setdata - 배열로작성된데이터를삽입합니다. // 3. setlayouturl - 레이아웃 XML 경로를지시합니다. // 4. setdataurl - 데이터 XML 경로를지시합니다. // 아래예제는가능한방법을제시한것입니다. // 현재 1번차트는레이아웃을스트링형태로받아들이고데이터는배열형태로받아들입니다. function rmatechartonload() { // 예제1. 레이아웃스트링형태, 데이터배열형태 chart1.setlayout(layoutstr); chart1.setdata(chartdata); // 예제 2. 레이아웃 XML URL 경로, 데이터배열형태 //chart1.setlayouturl(layouturl2); //chart1.setdata(chartdata2); // 예제 3. 레이아웃스트링형태, 데이터 XML URL 경로 //chart1.setlayout(layoutstr2); //chart1.setdataurl(dataurl2); // 예제 4. 레이아웃 URL, 데이터 URL //chart1.setlayouturl(layouturl); 157/170

158 } //chart1.setdataurl(dataurl); // 2번차트에서차트가생성되면호출하는함수 ( 사용자에의해정의됨 ) function rmatechartonload2() { // 예제2. 레이아웃 XML URL경로, 데이터배열형태 chart2.setlayouturl(layouturl2); chart2.setdata(chartdata2); } // 동적으로할당할레이아웃정의. var layouturl2 = encodeuricomponent("chartlayout.xml"); var layoutstr = "<rmatechart cornerradius='12' borderstyle='solid'>" +"<Options><Caption text='annual Report'/></Options>" +"<Line2DChart showdatatips='true'>" +"<horizontalaxis><categoryaxis categoryfield='month'/></horizontalaxis>" +"<series><line2dseries yfield='profit' displayname='profit'>" +"<showdataeffect><seriesinterpolate/></showdataeffect>" +"<linestroke><stroke color='0xff0000'weight='4'/>" +"</linestroke></line2dseries>" +"</series></line2dchart></rmatechart>"; // 동적으로할당할데이터정의. var chartdata = [{"Month":"Jan", "Revenue":10000, "Cost":5000, "Profit":5000}, {"Month":"Feb", "Revenue":15000, "Cost":7000, "Profit":8000}, {"Month":"Mar", "Revenue":12000, "Cost":6000, "Profit":6000}, {"Month":"Apr", "Revenue":30200, "Cost":4000, "Profit":26200}, {"Month":"May", "Revenue":28000, "Cost":10000, "Profit":18000}, {"Month":"Jun", "Revenue":12000, "Cost":5000, "Profit":7000}, {"Month":"Jul", "Revenue":22000, "Cost":10000, "Profit":12000}, {"Month":"Aug", "Revenue":13000, "Cost":6000, "Profit":7000}, {"Month":"Sep", "Revenue":22000, "Cost":10000, "Profit":12000}, {"Month":"Oct", "Revenue":29000, "Cost":8000, "Profit":21000}, {"Month":"Nov", "Revenue":18000, "Cost":7500, "Profit":10500}, {"Month":"Dec", "Revenue":30000, "Cost":12000, "Profit":18000} ]; var chartdata2 = [{"Month":"Jan", "Revenue":1000, "Cost":500, "Profit":500}, {"Month":"Feb", "Revenue":1500, "Cost":700, "Profit":800}, {"Month":"Mar", "Revenue":1200, "Cost":600, "Profit":600}, {"Month":"Apr", "Revenue":3020, "Cost":400, "Profit":2620}, {"Month":"May", "Revenue":2800, "Cost":1000, "Profit":1800}, {"Month":"Jun", "Revenue":1200, "Cost":500, "Profit":700}, 158/170

159 {"Month":"Jul", "Revenue":2200, "Cost":1000, "Profit":1200}, {"Month":"Aug", "Revenue":1300, "Cost":600, "Profit":700}, {"Month":"Sep", "Revenue":2200, "Cost":1000, "Profit":1200}, {"Month":"Oct", "Revenue":2900, "Cost":800, "Profit":2100}, {"Month":"Nov", "Revenue":1800, "Cost":750, "Profit":1050}, {"Month":"Dec", "Revenue":3000, "Cost":1200, "Profit":1800} ]; </script> <!-- 사용자정의설정끝 --> </head> <body> <table align="center" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center"> <div class="content"> <!-- 차트가삽입될 DIV --> <div id="chartholder" style="width:600px; height:400px;"> </div> </div> </td> <td align="center"> <div class="content"> <!-- 차트가삽입될 DIV --> <div id="chartholder2" style="width:600px; height:400px;"> </div> </div> </td> </tr> </table> </body> </html> < 예제 82 하나의 html 문서에 2 개의차트생성하는예제 > 실시간차트예제 주식모니터링차트 실시간차트의가장일반적인예제인주식모니터링예제입니다. 이레이아웃은기본으로제공되는레이 아웃입니다. <rmatechart backgroundcolor="0xffffee" cornerradius="12" borderstyle="solid"> <Options> <Caption text="stock Monitoring" /> 159/170

160 <SubCaption text=" 매 3초단위로업데이트합니다.( 데이터는랜덤 )" fontsize="11" textalign="right"/> <Legend/> </Options> <DateFormatter id="datefmt" formatstring="hh시 NN분 SS초 " />// 포매터정의 // 실시간차트는 type은 time, 60초동안 3초단위의데이터표현 <RealTimeChart id="chart" datadisplaytype="time" timeperiod="60" interval="3" showdatatips="true"> // 뒷배경에격자모양을그림. <backgroundelements> <GridLines direction="both"/> </backgroundelements> // 수평축으로 DateTime축사용, data와축라벨은모두초 (second) 단위이고 // 데이터는 3초단위로들어오며, 축라벨시간간격은 9초. GMT시간이아닌로컬시간표시 <horizontalaxis> <DateTimeAxis id="haxis" dataunits="seconds" labelunits="seconds" datainterval="3" interval="9" formatter="{datefmt}" displaylocaltime="true"/> </horizontalaxis> <series> <Column2DSeries yfield="volume" xfield="time" displayname="trading Volume" itemrenderer="gradientcolumnitemrenderer"> <fill> // 칼럼시리즈의채우기색지정 <SolidColor color="0xb0c759"/> </fill> <verticalaxis> 칼럼시리즈가참고하는축정의 <LinearAxis id="vaxis1" title="volume" minimum="0" maximum="10000"/> </verticalaxis> </Column2DSeries> <Line2DSeries xfield="time" yfield="price" displayname="stock Price" itemrenderer="circleitemrenderer" radius="5" fill="0xffff00"> <stroke> // 라인시리즈에서데이터가있는곳의표시를나타내는도형의선모양정의 <Stroke color="0xe48701" weight="2"/> </stroke> <linestroke> // 라인시리즈의선모양정의 <Stroke color="0xe48701" weight="4"/> </linestroke> <verticalaxis> // 라인시리즈가참고하는축정의 <LinearAxis id="vaxis2" title="price" minimum="0" maximum="1000"/> </verticalaxis> </Line2DSeries> </series> 160/170

161 <verticalaxisrenderers> // 두개의축의위치와참고축정의. <Axis2DRenderer placement="left" axis="{vaxis1}"> </Axis2DRenderer> <Axis2DRenderer placement="right" axis="{vaxis2}"> </Axis2DRenderer> </verticalaxisrenderers> </RealTimeChart> // 실제적으로데이터롤풀링하는 RPC 정의. <HttpServiceRepeater url=" target="{chart}" interval="3" method="get"/> </rmatechart> < 예제 83 실시간차트주식모니터링레이아웃 > < 그림 58 실시간차트 - 주식모니터링 > 차트의이미지데이터가져오기 화면에출력된차트화면을 base64 인코딩된데이터로가져올수있는기능입니다. HTML5 차트에서의이미지데이터는 HTML5 의 Canvas 에서제공하는 todataurl() 을사용합니다. 따라서 HTML5 를지원하지않는 IE7,8 과문서모드가쿼크모드일경우는이미지저장기능은제공되지않습니다. 차트에대한이미지데이터를가져오는것은다음과같이사용합니다. 161/170