rMate Chart for HTML5

1. HTML에 차트의 JS와 CSS, LicenseKey를 Include 합니다.

<link rel="stylesheet" type="text/css" href="../rMateChartH5/Assets/Css/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>

2. 차트가 생성되어질 DIV를 생성하고 크기를 설정합니다.

해당 div의 display값이 none일 경우는 크기를 제대로 가져오지 못하여 올바르게 출력이 되지 않을 수 있습니다.

<div id="chartHolder" style="width:800px;height:450px;"><div>

3. 차트 객체를 생성하는 함수를 실행합니다. 아래 예제에서는 식별자(ID)가 chart1 인 객체를 생성합니다.

// rMateChart 를 생성합니다.
// 파라메터 (순서대로)
// 1. 차트의 id ( 임의로 지정하십시오. )
// 2. 차트가 위치할 div 의 id (즉, 차트의 부모 div 의 id 입니다.)
// 3. 차트 생성 시 필요한 환경 변수들의 묶음인 chartVars
// 4. 차트의 가로 사이즈 (생략 가능, 생략 시 100%)
// 5. 차트의 세로 사이즈 (생략 가능, 생략 시 100%)
rMateChartH5.create("chart1", "chartHolder", "", "100%", "100%");

4. 어떤 차트를 생성할지 차트의 모양(레이아웃)을 정의합니다.

// 스트링 형식으로 레이아웃 정의

var layoutStr = '<rMateChart  backgroundColor="#ffffff" borderStyle="none">'
	+'<Options>'
		+'<Caption text="Price Indices of Meats ($ Per Kilogram)"/>'
		+'<SubCaption text="World Bank Commodity Price Data in 2024" textAlign="center" />'
		+'<Legend/>'
	+'</Options>'
	+'<NumberFormatter id="numFmt" precision="0"/>'
	+'<Line2DChart showDataTips="true" dataTipDisplayMode="axis" >'
		+'<horizontalAxis>'
			+'<CategoryAxis categoryField="Month" padding="0.2"/>'
		+'</horizontalAxis>'
		+'<verticalAxis>'
			+'<LinearAxis maximum="100"/>'
		+'</verticalAxis>'
		+'<series>'
			+'<Line2DSeries yField="Sheep" radius="5" displayName="Sheep" itemRenderer="RectangleItemRenderer">'
				+'<showDataEffect>'
					+'<SeriesInterpolate/>'
				+'</showDataEffect>'
			+'</Line2DSeries>'
			+'<Line2DSeries yField="Beef" radius="5" displayName="Beef" itemRenderer="CircleItemRenderer">'
				+'<showDataEffect>'
					+'<SeriesInterpolate/>'
				+'</showDataEffect>'
			+'</Line2DSeries>'
			+'<Line2DSeries yField="Chicken" radius="6" displayName="Chicken" itemRenderer="TriangleItemRenderer">'
				+'<showDataEffect>'
					+'<SeriesInterpolate/>'
				+'</showDataEffect>'
			+'</Line2DSeries>'
		+'</series>'
	+'</Line2DChart>'
+'</rMateChart>';

5. 설정한 차트의 모양으로 출력할 데이터를 정의합니다.

// 차트 데이터

var chartData = [{"Month":"Jan", "Beef":38.5, "Chicken":20, "Sheep":50},
	{"Month":"Feb", "Beef":56.57, "Chicken":27.52, "Sheep":42},
	{"Month":"Mar", "Beef":58.57, "Chicken":23.65, "Sheep":40},
	{"Month":"Apr", "Beef":41.13, "Chicken":29.54, "Sheep":60},
	{"Month":"May", "Beef":40.58, "Chicken":24.21, "Sheep":50},
	{"Month":"Jun", "Beef":60.79, "Chicken":39.12, "Sheep":52.5},
	{"Month":"Jul", "Beef":49.14, "Chicken":32.56, "Sheep":70.64},
	{"Month":"Aug", "Beef":89.35, "Chicken":39.24, "Sheep":68.57},
	{"Month":"Sep", "Beef":65.21, "Chicken":32.12, "Sheep":54.14},
	{"Month":"Oct", "Beef":75.15, "Chicken":42.12, "Sheep":57.58},
	{"Month":"Nov", "Beef":69.12, "Chicken":35.54, "Sheep":54.47},
	{"Month":"Dec", "Beef":73.24, "Chicken":40.45, "Sheep":62.47}];

6. 위에서 정의된 레이아웃과 데이터를 차트 객체에 설정하는 함수를 실행하면 아래와 같은 차트가 생성됩니다.

rMateChartH5.calls("chart1", { "setLayout" : layoutStr,
"setData" : chartData });