TreemapChart
TreemapChart(트리맵차트) 위젯은 각 항목을 넓이(면적)로 표현해 값의 비중을 한눈에 보여주는 사각형 타일 차트입니다.
주식 시세 히트맵처럼 값의 크기와 등락(색)을 함께 나타내는 데 사용합니다.
정의 / 역할
TreemapChart 위젯은 계층형 데이터를 면적으로 인코딩한 트리맵(히트맵)을 그려줍니다. 각 타일의 크기는 값(value)에, 색은 등락값(colorValue)에 대응합니다. 셀 간격·모서리 둥글기·애니메이션 사용 여부를 설정할 수 있고, 타일을 클릭하면 클릭 동작이 실행됩니다.
- 카테고리: Contents
- 기본 크기:
300 × 200 - 편집(디자인) 화면에서는 예시 종목 데이터가 표시됩니다.
기능
| 기능 | 설명 |
|---|---|
| 면적 기반 시각화 | 각 항목의 값(value)을 타일 넓이로 표현해 비중을 비교합니다. |
| 색상(등락) 표현 | 등락값(colorValue)에 따라 타일 색이 양수/음수 색 구간으로 매핑됩니다. |
| 데이터 교체 | 스크립트에서 데이터를 JSON으로 교체해 차트를 갱신합니다. |
| 툴팁·그룹 요약 | 항목 툴팁과 그룹 요약에 표시할 필드를 구성합니다. |
| 클릭 상호작용 | 타일을 클릭하면 연결된 동작이 실행됩니다. |
| 모양 설정 | 셀 간격·모서리 둥글기·애니메이션 사용 여부를 조정합니다. |
사용 방법
- 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
- TreemapChart 항목을 캔버스로 끌어다 놓습니다.
- 오른쪽 속성 패널에서 셀 간격(
spacing)·모서리 둥글기(borderRadius)·애니메이션(useAnimation)을 조정합니다. - 실제 데이터를 넣으려면 스크립트에서 데이터를 JSON으로 전달합니다.
- 타일 클릭 반응이 필요하면 클릭 동작을 연결합니다.
노트
스크린샷 필요: 왼쪽 위젯 팔레트에서 TreemapChart 항목을 캔버스로 드래그하는 모습
속성 (Property)
| 속성 | 설명 | 기본값 | 값 / 타입 |
|---|---|---|---|
bgColor | 차트 배경색 - 현재 버전에서는 동작하지 않습니다. | 미지정 | 색상 |
spacing | 타일(셀) 사이 간격 | 2 | 숫자 (0 이상) |
borderRadius | 타일 모서리 둥글기 | 0 | 숫자 (0 이상) |
useAnimation | 셀 표시 애니메이션 사용 여부 | false | true / false |
주의 / 팁
팁
편집(디자인) 화면에는 예시 종목 데이터가 표시됩니다. 실제 데이터는 스크립트에서 데이터를 넣어야 반영됩니다.
노트
타일 색은 값의 등락(colorValue)에 따라 양수/음수 색 구간으로 매핑됩니다. 색 구간과 통화 단위('원' / '달러')는 스크립트로 바꿀 수 있습니다.
더 알아보기
팁
이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 TreemapChart (트리맵차트) Widget Control 문서에서 확인하세요.