데모셀 오버레이데이터바
같은 분기 안에서 채널·상품의 매출 규모와 기여도를 막대 길이로 비교하는 데모입니다.
주요 특징
데이터바로 매출 금액과 기여도를 직관적으로 비교할 수 있습니다.
비교 범위를 같은 분기(열) 단위로 지정하면, 시즌별 전체 규모 차이와 관계없이 채널·상품 간 상대 기여도를 파악할 수 있습니다.
| 값 필드 | 표시 형식 | 스케일 | 데이터바 역할 |
|---|---|---|---|
| 주문 금액 | 절대 금액 $ | logBase: 10 | 분기 열 기준 매출 규모 비교 |
| 분기 매출 비중 | colPercent (열 비중) | logBase: 10 | 같은 분기 안 기여도 비교 |
| 주문 건수 | 건수 | — | 수량 데이터 참조 |
compareScope: 'column'은 열(분기) 단위로 정규화한 뒤 로그 스케일(logBase: 10)을 적용합니다. 시즌별 전체 규모 차이로 인한 착시를 막고, 대형 수치에 의한 막대 쏠림도 완화합니다.
화면에서 보기
행은 유입 채널 · 상품, 열은 년도 · 분기입니다.
파란 막대는 절대 금액, 청록 막대는 열 비중을 나타냅니다. 두 항목 모두 로그 스케일(logBase: 10)을 적용하여, 수치 격차가 큰 항목 간에도 시각적 차이를 구분할 수 있습니다. 비중(%)과 절대 금액을 함께 보면 분기 전체 규모와 실질 기여도를 동시에 비교할 수 있습니다.
| 조작 | 동작 |
|---|---|
| 필터 바 | 주문 상태 · 결제 수단 · 주문일 |
| 크로스헤어 | 커서 위치의 행·열을 동시에 강조 |
코드로 지정하기
values: [
{
name: '주문 금액',
numberFormat: '"$",#,##0',
dataBar: {
visible: true,
cellScope: 'value',
compareScope: 'column',
logBase: 10,
color: '#2563eb',
},
},
{
name: '분기 매출 비중',
showAs: 'colPercent',
baseAxis: 'column',
numberFormat: '0.0%',
dataBar: {
visible: true,
compareScope: 'column',
logBase: 10,
color: '#0d9488',
},
},
]자세한 설정은 셀 오버레이 가이드를 참고하세요.
플레이그라운드를 불러오는 중…