RealChart 모듈 사용 가이드
RealChart 모듈 개요 및 사용 방법
RealChart는 다양한 데이터 시각화를 위해 여러 종류의 시리즈를 지원하며, 자주 사용되는 일반적인 시리즈들 외에 특정 시리즈 및 게이지들을 사용하기 위해서는 시리즈나 게이지들이 포함된 별도 모듈을 추가로 로드해야 한다. 각 모듈은 독립적으로 관리되므로 필요한 기능에 맞춰 모듈을 선택적으로 가져와 사용하면 된다. 이 가이드에서는 각 모듈의 사용 방법과 로드 방식에 대해 설명한다.
아래 현재 배포되는 모듈들과 모듈에 포함된 시리즈 및 게이지들과 분할 차트에 대해 설명한다.
모듈 등록 방식
v1.5.0부터 ESM 환경에서는 모듈을 import 하는 것만으로 등록이 끝난다. 등록 함수를 따로 호출할 필요가 없다.
import * as RealChart from "realchart";
import "realchart/heatmap"; // 이 한 줄로 heatmap 시리즈를 쓸 수 있다
RealChart.createChart(document, "realchart", {
xAxis: { categories: ["Mon", "Tue", "Wed"] },
yAxis: { categories: ["A", "B"] },
series: {
type: "heatmap",
data: [[0, 0, 10], [1, 0, 19], [2, 1, 8]]
}
});이전 방식인 명시 등록도 그대로 동작한다. 기존 코드를 고치지 않아도 된다.
// v1.4.x 까지의 방식 — 계속 지원한다
import * as RealChart from "realchart";
import Heatmap from "realchart/heatmap";
Heatmap(RealChart);두 방식을 함께 써도 문제없다. 같은 클래스를 다시 등록하는 것이라 결과가 달라지지 않는다.
번들러를 쓸 때
import "realchart/heatmap" 은 가져오는 값이 없는 side-effect import 다.
번들러가 이를 "쓰이지 않는 import" 로 보고 제거하면 시리즈가 등록되지 않아
Unknown series type: 'heatmap' 이 발생한다.
realchart 패키지는 package.json 의 sideEffects 에 모듈 진입점을 등재해
이 제거를 막는다. 별도 설정은 필요 없다. 다만 번들러 설정에서 sideEffects 를
강제로 false 로 덮어쓰면 등록이 사라지므로 주의한다.
Vanilla JavaScript(UMD) 환경
script 태그로 모듈 파일을 읽어들이면 그 시점에 등록된다. 이 환경도 별도 호출이 필요 없다.
코어를 먼저 읽고 모듈을 나중에 읽어야 한다.
배포본 zip 을 풀면 아래 구조가 나온다. 필요한 파일을 프로젝트에서 서빙하는
위치(아래 예제에서는 lib/)로 복사해 사용한다.
realchart.1.5.0/
├── realchart.1.5.0.min.js ← 코어 (realchart.{version}.min.js)
├── realchart.1.5.0.mjs
├── realchart-treemap.1.5.0.js ← 모듈 (realchart-{module}.{version}.js)
├── realchart-treemap.1.5.0.mjs
├── ... (heatmap, vector, gauge, split, wordcloud, pictogram)
├── realchart-style.css
└── ie/코어는 점, 모듈은 하이픈 뒤에 점으로 버전이 붙는다. 아래 예제의 {version} 은
내려받은 버전으로 바꿔 쓴다. npm 패키지 안의 파일명(treemap.js 등)은
import "realchart/treemap" 서브패스 전용이라 script 태그에 쓰면 안 된다.
모듈별 사용 방법
1. Treemap 모듈
TypeScript / ES6 환경
import * as RealChart from "realchart";
import "realchart/treemap";Vanilla JavaScript 환경
<script src="./lib/realchart.{version}.min.js"></script>
<script src="./lib/realchart-treemap.{version}.js"></script>2. Heatmap 모듈
TypeScript / ES6 환경
import * as RealChart from "realchart";
import "realchart/heatmap";Vanilla JavaScript 환경
<script src="./lib/realchart.{version}.min.js"></script>
<script src="./lib/realchart-heatmap.{version}.js"></script>3. Vector 모듈
TypeScript / ES6 환경
import * as RealChart from "realchart";
import "realchart/vector";Vanilla JavaScript 환경
<script src="./lib/realchart.{version}.min.js"></script>
<script src="./lib/realchart-vector.{version}.js"></script>4. Gauge 모듈
TypeScript / ES6 환경
import * as RealChart from "realchart";
import "realchart/gauge";Vanilla JavaScript 환경
<script src="./lib/realchart.{version}.min.js"></script>
<script src="./lib/realchart-gauge.{version}.js"></script>5. Split 모듈
TypeScript / ES6 환경
import * as RealChart from "realchart";
import "realchart/split";Vanilla JavaScript 환경
<script src="./lib/realchart.{version}.min.js"></script>
<script src="./lib/realchart-split.{version}.js"></script>6. wordcloud 모듈
TypeScript / ES6 환경
import * as RealChart from "realchart";
import "realchart/wordcloud";Vanilla JavaScript 환경
<script src="./lib/realchart.{version}.min.js"></script>
<script src="./lib/realchart-wordcloud.{version}.js"></script>7. Pictogram 모듈
TypeScript / ES6 환경
import * as RealChart from "realchart";
import "realchart/pictogram";Vanilla JavaScript 환경
<script src="./lib/realchart.{version}.min.js"></script>
<script src="./lib/realchart-pictogram.{version}.js"></script>