rMateChartH5 API Reference

알메이트 차트는 다양한 유형의 차트를 표현하는 자바스크립트 차팅 컴포넌트입니다.

알메이트 차트를 이용해서 차트를 생성하는 방법

차트 생성을 원하는 HTML 파일에 알메이트 차트에서 사용하는 CSS 스타일 파일, 알메이트 차트 라이센스 파일 그리고 알메이트 자바스크립트 차팅 라이브러리를 Include 합니다.

<!-- 알메이트 차트에서 사용하는 CSS 스타일 파일 -->
<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>

차트가 생성되는 <div> 를 정의하고 style 에 크기를 설정합니다.

<!-- <div> 의 display 속성값이 none 일 경우에는 차트의 크기가 올바르게 설정되지 않을 수 있으니 유의하십시요. -->
<div id="chartHolder" style="width:800px; height:450px;"><div>

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

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

생성할 차트의 유형과 모양을 정의합니다.

// 자바스크립트 변수(layoutStr)에 스트링 형식으로 레이아웃을 정의한 예
var layoutStr =
'<rMateChart  backgroundColor="#ffffff" borderStyle="none">'
  +'<Options>'
    +'<Caption text="Price Indices of Meats ($ Per Kilogram)"/>'
    +'<SubCaption text="World Bank Commodity Price Data in 2013" textAlign="center" />'
    +'<Legend useVisibleCheck="true"/>'
  +'</Options>'
  +'<NumberFormatter id="numFmt" precision="0"/>'
  +'<Line2DChart showDataTips="true" dataTipDisplayMode="axis" paddingTop="0">'
    +'<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>';

차트에 적용될 데이터를 정의합니다.

// 차트 데이터를 JSON 객체 형식으로 정의한 예
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}
];

위에서 정의된 레이아웃과 데이터를 차트 객체에 설정하는 함수를 실행합니다.

// rMateChartH5.calls 함수를 이용하여 차트의 준비가 끝나면 실행할 함수를 등록합니다.
//
// argument 1 - rMateChartH5.create시 설정한 차트 객체 아이디 값
// argument 2 - 차트준비가 완료되면 실행할 함수 명(key)과 설정될 전달인자 값(value)
// 
// 아래 내용은 
// 1. 차트 준비가 완료되면 첫 전달인자 값을 가진 차트 객체에 접근하여
// 2. 두 번째 전달인자 값의 key 명으로 정의된 함수에 value값을 전달인자로 설정하여 실행합니다.
rMateChartH5.calls("chart1", {
    "setLayout" : layoutStr, // 차트 객체에 레이아웃을 설정하는 함수를 실행합니다.
    "setData" : chartData // 차트 객체에 데이터를 설정하는 함수를 실행합니다.
});

Index

rMateChartH5 API Reference

알메이트 차트를 이용해서 차트를 생성하는 방법