가이드
셀 오버레이

셀 오버레이

데이터바·히트맵·강조·아이콘셋으로 값 셀을 시각화하는 방법을 설명합니다.

셀 오버레이는 값 셀 위에 시각적 장식을 겹칩니다.
소계·총계 옆 별도 열을 만드는 렌더러(시리즈)와는 다릅니다.

히트맵이 적용된 피벗 화면

어디에 지정하나요

값 필드 옵션인 PivotValueFieldOptions에서 설정합니다. 각 옵션은 필드별로 독립 적용되며, 4가지 형태를 동시에 활성화할 수 있습니다.

속성옵션 타입역할
dataBarPivotDataBarOptions값 크기를 막대로 표시
heatmapPivotHeatmapOptions값 구간에 따라 배경색
highlightPivotHighlightOptions조건에 맞는 셀 강조
iconPivotIconOverlayOptions구간별 아이콘셋

기본값은 visible: false입니다. 사용하려면 **visible: true**로 설정합니다.
강조(highlight) 기능은 visible 옵션과 함께 rules가 작성되어 있어야 적용됩니다.

fields: {
  rows: ['차종', '브랜드명'],
  columns: ['판매분기', '판매월'],
  values: [
    {
      name: '판매수량',
      heatmap: { visible: true, logBase: 10 },
    },
    {
      name: '차량가격',
      dataBar: { visible: true, logBase: 10, borderColor: '#44f' },
    },
  ],
}

적용 범위 · 비교 범위

4가지 오버레이 모두 cellScope 및 compareScope 옵션을 사용합니다.

옵션의미기본값
cellScope오버레이를 표시할 셀 종류'value'
compareScope막대 길이·색·순위 등을 비교할 그룹'all'

cellScope

값설명
'value'상세(leaf) 셀만
'subtotal'소계만
'total'총계(grand)만
'all'전부
배열조합. 예: ['value', 'subtotal']

소계·총계는 값이 커서, 상세와 한 범위로 정규화하면 상세 셀이 거의 보이지 않을 수 있습니다.
cellScope: 'all'을 사용하는 경우, 데이터 왜곡을 방지하기 위해 compareScope 옵션에 'level'을 지정하는 것을 권장합니다.

heatmap: {
  visible: true,
  cellScope: 'all',
  compareScope: 'level',
}

compareScope

값설명
'all'적용 대상을 한 덩어리로 비교
'row'행마다 따로
'column'열마다 따로
'level'상세 / 소계 / 총계끼리 분리
'rowGroup'같은 직속 부모 행의 형제끼리
'columnGroup'같은 직속 부모 열의 형제끼리
배열교차 그룹. 예: ['rowGroup', 'column']

자주 쓰는 패턴입니다.

목적설정 예
표 전체에서 top NcompareScope: 'all'
각 행마다 top N · 행별 히트맵compareScope: 'row'
각 열마다 비교compareScope: 'column'
부모 그룹(예: 차종) 안 형제끼리compareScope: 'rowGroup'
그룹 × 열compareScope: ['rowGroup', 'column']

강조의 절대값 규칙(greater, between 등)에는 compareScope가 쓰이지 않습니다.
통계 규칙(top, aboveAvg 등)과 데이터바·히트맵·아이콘셋 설정 시에만 유효합니다.

데이터바 (dataBar)

셀 값의 상대 크기를 가로 막대로 보여 줍니다.

속성설명
color / negativeColor양수·음수 막대 색 (기본 #638ec6 / #ff6347)
alpha투명도 0~1 (기본 0.4)
barOnlytrue면 숫자 텍스트를 숨기고 막대만
gradient그라데이션 막대
bidirectional기준값(baseValue, 기본 0) 기준 좌·우 막대
boundsMode · minValue · maxValue정규화 경계 (ValueBoundsMode)
outOfRange'clamp'(기본) | 'hide' — 범위 밖 처리
logBase1보다 큰 값을 지정할 경우 로그 스케일 적용
{
  name: '취업자',
  dataBar: {
    visible: true,
    cellScope: 'all',
    compareScope: ['level'],
    color: '#2171b5',
  },
}

히트맵 (heatmap)

값 구간에 따라 셀 배경색을 칠합니다.

속성설명
colors낮→고 그라데이션. 2~3개 색 배열
midValue3색일 때 중간점 (boundsMode로 해석). 생략 시 중점
nullColornull/undefined 셀 색
boundsMode · minValue · maxValue · outOfRange · logBase데이터바와 동일 계열

colors를 생략하면 측정값 순서에 따른 기본 팔레트가 적용됩니다.

{
  name: '고용률',
  heatmap: {
    visible: true,
    cellScope: 'all',
    boundsMode: 'value',
    minValue: 40,
    midValue: 57,
    maxValue: 75,
    colors: ['#ffffff', '#a1d99b', '#006d2c'],
  },
}

강조 (highlight)

조건에 맞는 셀에 스타일·아이콘을 적용합니다.
rules 배열과 ruleMode('first' | 'last' | 'all', 기본 'first')로 다중 규칙을 제어합니다.

규칙 유형

HighlightType입니다.

구분typevalue
비교greater · greaterEqual · less · lessEqual · equal · notEqual기준값 1개
범위between · notBetween[하한, 상한]
목록in · notIn숫자 배열 (API)
순위top · bottomN개
비율topPercent · bottomPercent0~100
평균aboveAvg · belowAvg불필요

규칙마다 style(PivotCellStyle), className, 개별 cellScope / compareScope를 둘 수 있습니다.
규칙의 cellScope는 오버레이 cellScope의 부분집합만 유효합니다.

{
  name: '판매수량',
  highlight: {
    visible: true,
    compareScope: ['rowGroup', 'column'],
    rules: [
      {
        type: 'top',
        value: 2,
        cellScope: ['value'],
        style: { backgroundColor: 'rgba(255,0,0,0.3)' },
      },
    ],
  },
}

아이콘셋 (icon)

값 구간에 따라 아이콘을 표시합니다.

속성설명
iconSet빌트인 세트 이름 (기본 'arrows-3')
divideMode'percent'(기본) | 'percentile' | 'value' — thresholds 해석
thresholds구간 경계. 길이 = 아이콘 수 − 1
placementIconPlacement — 'auto' | 'start' | 'end' | 'left' | 'right'
iconOnlytrue면 텍스트 숨김
reversed높은 값부터 첫 번째 아이콘이 매핑되도록 순서 반전
iconSize · gap크기(px)·텍스트와의 간격

빌트인 PivotIconSet:

arrows-3 · arrows-5 · triangles-3 · traffic-3 · flags-3 · stars-3 · bars-5 · checks-3

{
  name: '판매수량',
  icon: {
    visible: true,
    iconSet: 'traffic-3',
    cellScope: 'value',
    compareScope: ['rowGroup', 'column'],
  },
}

여러 오버레이를 같이 쓸 때

같은 값 필드에 데이터바·히트맵·강조·아이콘을 함께 켤 수 있습니다.

레이어우선순위
배경색강조 backgroundColor > 히트맵
막대데이터바 (히트맵과 동시 표시 가능)
아이콘강조 규칙 아이콘 > 아이콘셋 (데이터바 위에 표시)
텍스트 숨김dataBar.barOnly 또는 icon.iconOnly

값 변환이 필요하면 Show As를, 표시 텍스트만 바꾸려면 formatter를 쓰세요.

화면에서 바꾸기

인스펙터의 값 필드 메뉴 또는 값 필드 열 헤더 메뉴에서 '셀 오버레이' 항목을 선택합니다.

  • 데이터바
  • 히트맵
  • 강조
  • 아이콘셋

대화상자에서 적용 범위·비교 범위·색·규칙 등을 조정할 수 있습니다.

API로 바꾸기

const book = control.book;
const table = control.table;
const field = table.fields.getValueField('판매수량');
 
book.updateItem(field.dataBar, {
  visible: true,
  compareScope: 'column',
  logBase: 10,
});
 
book.updateItem(field.heatmap, {
  visible: true,
  colors: ['#ffe080', '#63c030'],
});
 
book.updateItem(field.highlight, {
  visible: true,
  rules: [
    { type: 'aboveAvg', style: { color: 'red' } },
  ],
});
 
book.updateItem(field.icon, {
  visible: true,
  iconSet: 'traffic-3',
});

Undo가 필요 없으면 field.dataBar.updateOptions({ … })처럼 직접 바꿀 수도 있습니다.
옵션 변경 규칙은 개발 가이드를 참고하세요.

See Also

표시 형식(Show As)렌더러(Renderer)