amCharts 5 가이드
이 장에서는 이름 규칙에 대해서 아래의 내용을 설명한다.
- amCharts 5 개요 및 파일/디렉토리 구조
- Am5Charts 개발 환경 설정
amCharts 5 는 https://www.amcharts.com 사이트에서 제공하는 HTML5 기반 차트 솔루션 5.0 버전을 의미한다.
amCharts 5 솔루션은 설치 디렉토리(이하 $(AMCHART5_HOME)에 차트 솔루션 엔진 파일 및 차트 유형별 라이브러리 파일로 구성된다.
| 구분 | 파일 | 비고 |
|---|---|---|
| $(AMCHART5_HOME) | index.js | amCharts 엔진 파일 |
| 차트 유형별 라이브러리 파일 | 엔지 유형별 라이브러리 파일 | |
| Examples 디렉토리 | 차트 유형별 샘플 디렉토리 |
Am5Charts 개발 환경 설정 및 용어 정의
xFrame5 환경에서 amCharts5 를 컴포넌트를 이용하여 개발하기 위해서는 프로제트 xFrame5.js 의 실행
| 구분 | 설명 | 예시 |
|---|---|---|
| amCharts5 설치 | xframe5.html 에서 WEB 방식으로 접근 가능한 경로에 처리해야 한다. | xf5/amcharts_5.0.13 |
| 실행 파라미터 | AMCHARTS5BASEURL 실행 파라미터를 지정해야 한다. | “./xf5/amcharts_5.0.13” |
| amCharts5 솔루션 | amCharts 사에서 제공하는 amCharts 솔루션 버전 5 를 의미한다. | 용어 정의 |
| amCharts5 컴포넌트 | xFrame5 솔루션에서 amChart5 솔루션 기능을 사용하기 위해 제공하는 컴포넌트를 의미한다. | 용어 정의 |
개발 방법
xFrame5 amChart5 컴포넌트 개요
xFrame5 amCharts5 컴포넌트는 amChart5 솔루션의 차트를 표현하기 위해 아래와 같은 기능을 제공한다.
- amCharts5를 표현하기 위한 기본 DIV 컴포넌트 제공
- amCharts5 라이브러리 로딩 기능
- amCharts5 root 오브젝트 생성 및 환경 설정 기능
- amCharts5 관련 라이브러리 및 차트 관련 이벤트 발생 기능
업무 화면 개발자는 차트 유형별 차트 정보 설정 및 데이터 설정 처리는 직접 개발해야 한다.
xFrame5 amChart5 컴포넌트 및 amCharts5 솔루션 라이브러리 로드
xFrame5 amChart5 컴포넌트는 amCharts5 솔루션에서 제공하는 차트 관련 라이브러리를 동적으로 로드하는 방식으로 동작하기 때문에, 차트를 생성하는 로직에 대한 개발은 on_libload 이벤트 및islibload API 함수 호출 결과 확인후 개발해야 한다.
amChart5 root 오브젝트 및 API
amCharts5 솔루션은 root 오브젝트라는 아키텍처를 이용하는 구조로 되어있으며, 차트를 생성하기 위한 기본 환경 및 차트 전역 처리를 위한 기능을 제공한다.
- xFrame5 amCharts5 컴포넌트의 getroot API를 통해서 amCharts5 솔루션의 root 오브젝트를 구함
- 라이브러리가 로드되기 전에 getroot API 호출시 null 값이 리턴된다.