데모탐색기차트
이커머스 주문 데이터로 유입 채널별 분기 매출을 라인 차트로 비교하는 Chart 패널 데모입니다.
화면에서 보기
로드가 끝나면 첫 데이터 셀(맨 위 행 · 1월) 기준으로 탐색기가 열린 상태로 표시됩니다.
값 셀을 더블클릭하거나, 포커스된 셀에서 Enter를 눌러도 열 수 있습니다.
이 데모는 explorerMode: 'chart'이라 Chart 패널이 바로 표시됩니다. 기본 차트 유형은 line, 범주 축은 열(분기) 입니다.
| 조작 | 동작 |
|---|---|
| 값 셀 더블클릭 · Enter | 탐색기 열기(차트) |
| Detail / Chart / Map 탭 | 모드 전환 |
| 탐색기 메뉴 · 차트 유형 | column / bar / line / area / scatter / pie |
| 탐색기 메뉴 · 범주 방향 | 행 / 열 |
| 탐색기 메뉴 · 위치 | 아래 / 왼쪽 / 오른쪽 |
| 닫기 버튼 | 탐색기 닫기 |
행은 유입 채널·상품, 열은 년도·분기, 값은 주문 금액만 두어 시계열 비교가 잘 보이도록 구성했습니다.
외부 모듈 등록
Chart 패널은 RealChart를 useAll(또는 React·Vue의 modules)로 등록해야 합니다.
import * as RealChart from 'realchart';
import { useAll } from 'realpivot2';
import 'realchart/realchart-style.css';
useAll({ RealChart });자세한 설정은 탐색기 가이드를 참고하세요.
플레이그라운드를 불러오는 중…