RMATE6 가이드

알메이트 차트 개요에 대한 예시 화면이다.

screen loadjs API 및 DIV 컴포넌트의 getdom, getjdom API를 활용하여 구성한다.

※관련 사이트 아래 참조

템플릿 위치: /HTML5/3RD/RMATE/rmate6_basic

템플릿 파일

• rmate6_basic.xml
• rmate6_basic.js
• 새창으로 실행

/*
 * rMateChartH5 6.0 버전
 * 샘플명: Column 3D
 */

// 스트링 형식으로 레이아웃 정의.
var layoutStr =
	'<rMateChart backgroundColor="#FFFFFF" borderStyle="none">'
		+'<Options>'
			+'<Caption text="World Top 10 - Fastest Growing Economies (2017)" />'
			+'<SubCaption text="GDP Growth (In %)" textAlign="center" />'
		+'</Options>'
		+'<Column3DChart showDataTips="true" columnWidthRatio="0.4">'
			+'<horizontalAxis>'
				+'<CategoryAxis categoryField="Country"/>'
			+'</horizontalAxis>'
			+'<verticalAxis>'
				+'<LinearAxis maximum="100" interval="10"/>'
			+'</verticalAxis>'
			+'<series>'
				+'<Column3DSeries labelPosition="outside" yField="GDP" displayName="Debt (% of GDP)" outsideLabelYOffset="-14" outsideLabelXOffset="7" showValueLabels="[4,5]">'
					+'<showDataEffect>'
						+'<SeriesInterpolate/>'
					+'</showDataEffect>'
				+'</Column3DSeries>'
			+'</series>'
		+'</Column3DChart>'
	+'</rMateChart>';


// 차트 데이터
var chartData = [{"Country":"South<br>Sudan", "GDP":20},
				{"Country":"Libya", "GDP":30},
				{"Country":"Sierra<br>Leone", "GDP":51.2},
				{"Country":"Mongolia", "GDP":44.5},
				{"Country":"Paraguay", "GDP":62.35},
				{"Country":"Timor<br>Leste", "GDP":84.46},
				{"Country":"Iraq", "GDP":48.9},
				{"Country":"Panama", "GDP":38},
				{"Country":"Gambia", "GDP":60.5},
				{"Country":"Mozam-<br>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
	});
}