====== RMATE6 가이드 ======
알메이트 차트 개요에 대한 예시 화면이다.
screen loadjs API 및 DIV 컴포넌트의 getdom, getjdom API를 활용하여 구성한다.
※관련 사이트 아래 참조
===== 예시 =====
템플릿 위치: /HTML5/3RD/RMATE/rmate6_basic
템플릿 파일
* [[xf5projecthome>template/screen/HTML5/3RD/RMATE/rmate6_basic.xml|rmate6_basic.xml]]
* [[xf5projecthome>template/screen/HTML5/3RD/RMATE/rmate6_basic.js|rmate6_basic.js]]
* [[xf5projecthome>template/template.html?xframe_screen_url=/HTML5/3RD/RMATE/rmate6_basic|새창으로 실행]]
echo '';
echo '';
echo '';
==== 화면 스크립트 ====
/*
* rMateChartH5 6.0 버전
* 샘플명: Column 3D
*/
// 스트링 형식으로 레이아웃 정의.
var layoutStr =
''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+''
+'';
// 차트 데이터
var chartData = [{"Country":"South
Sudan", "GDP":20},
{"Country":"Libya", "GDP":30},
{"Country":"Sierra
Leone", "GDP":51.2},
{"Country":"Mongolia", "GDP":44.5},
{"Country":"Paraguay", "GDP":62.35},
{"Country":"Timor
Leste", "GDP":84.46},
{"Country":"Iraq", "GDP":48.9},
{"Country":"Panama", "GDP":38},
{"Country":"Gambia", "GDP":60.5},
{"Country":"Mozam-
bique", "GDP":40.1}];
// 차트 라이브러리 로드 버튼 처리
function btn_loadjs_on_mouseup(objInst)
{
// rMateChartH5 라이브러리 라이선스 키
screen.loadjs("./ext/lib/rmate6/LicenseKey/rMateChartH5License.js");
// rMateChartH5 에서 사용하는 스타일
screen.loadcss("./ext/lib/rmate6/rMateChartH5/Assets/Css/rMateChartH5.css");
// 실제적인 rMateChartH5 라이브러리
screen.loadjs("./ext/lib/rmate6/rMateChartH5/JS/rMateChartH5.js");
}
// 차트 표시 대상이 되는 CANVAS DOM 생성
function btn_createchart_on_mouseup(objInst)
{
// div 컴포넌트의 id 구하기
var jdom = this.div_basic.getjdom();
var div_id = jdom.prop("id");
// rMateChart 를 생성합니다.
// 파라메터 (순서대로)
// 1. 차트의 id ( 임의로 지정하십시오. )
// 2. 차트가 위치할 div 의 id (즉, 차트의 부모 div 의 id 입니다.)
// 3. 차트 생성 시 필요한 환경 변수들의 묶음인 chartVars
// 4. 차트의 가로 사이즈 (생략 가능, 생략 시 100%)
// 5. 차트의 세로 사이즈 (생략 가능, 생략 시 100%)
try {
rMateChartH5.create("chart1", div_id, "", "100%", "100%");
}
catch (e) {
console.log(e);
}
// rMateChartH5.calls 함수를 이용하여 차트의 준비가 끝나면 실행할 함수를 등록합니다.
//
// argument 1 - rMateChartH5.create시 설정한 차트 객체 아이디 값
// argument 2 - 차트준비가 완료되면 실행할 함수 명(key)과 설정될 전달인자 값(value)
//
// 아래 내용은
// 1. 차트 준비가 완료되면 첫 전달인자 값을 가진 차트 객체에 접근하여
// 2. 두 번째 전달인자 값의 key 명으로 정의된 함수에 value값을 전달인자로 설정하여 실행합니다.
rMateChartH5.calls("chart1", {
"setLayout" : layoutStr,
"setData" : chartData
});
}