가이드
렌더러(Renderer)

렌더러(Renderer)

소계·총계 옆 미니 차트 열에 적용하는 렌더러(sparkbar / sparkline / sparkwinloss) 설정 방법입니다.

렌더러는 피벗에 시리즈(별도 열·행) 를 두고, 그 셀에 미니 차트를 그립니다.
값 셀 위에 장식을 겹치는 셀 오버레이와 달리, 레이아웃에 열이 추가됩니다.

소계·총계 위치는 소계·총계를 참고하세요.

sparkline·sparkbar 렌더러 Trend 열이 보이는 피벗 화면

어디에 지정하나요

페이지(tables)의 series 옵션 항목에 설정합니다. 시리즈 옵션은 데이터의 배치 위치와 측정값을 정의하며, renderer 속성은 시각화 표현 방식을 결정합니다.

계층속성역할
tables[].seriesPivotSeriesOptions시리즈 열·행 배치
series[].renderer타입 문자열 또는 옵션 객체셀 시각화 방식
tables: {
  name: 'sales',
  cube: 'sales',
  fields: {
    rows: ['차종', '브랜드명'],
    columns: ['판매분기', '판매월'],
    values: ['판매수량', '차량가격'],
  },
  series: [
    {
      name: 'series-line',
      label: 'Trend\n(분기 차량가격)',
      dimension: '판매분기',
      measure: '차량가격',
      width: 150,
      position: 'total',
      renderer: {
        type: 'sparkline',
        curved: true,
        areaColor: '#007bff55',
      },
    },
    {
      name: 'series-bar',
      label: 'Trend\n(년간 판매수량)',
      // dimension 생략 → 총계(grand) 옆
      measure: '판매수량',
      width: 150,
      renderer: { type: 'sparkbar' },
    },
  ],
}

renderer 속성에는 타입 문자열만 지정할 수도 있습니다.

series: [
  { dimension: '판매분기', measure: '판매수량', renderer: 'sparkline' },
]

시리즈 배치

속성설명
dimension지정하면 해당 차원의 소계 옆. 생략하면 총계(grand) 옆
measure그릴 측정값. 생략 시 첫 번째 값 필드
axis총계 시리즈일 때의 축. 'row' | 'column'(기본). dimension 속성이 정의되어 있으면 해당 차원의 축을 따릅니다
position'start' | 'end' | 'total'(기본). 그룹 처음·끝 또는 소계/총계 위치
order'before'(기본) | 'after' — 소계·총계와의 앞뒤
label헤더 라벨. \n으로 줄바꿈 가능
width열 시리즈 너비(px). 기본 100
visible표시 여부. 기본 true
name시리즈 식별 이름

값 필드를 행으로 두는 valuesAsRows가 켜져 있으면 행 시리즈만, 꺼져 있으면 열 시리즈만 표시됩니다.

렌더러 종류

PivotSeriesRendererType: 'text' · 'sparkbar' · 'sparkline' · 'sparkwinloss'.
생략 시 'text'입니다.

type용도
textleaf 값들을 텍스트로 나열
sparkbar구간별 크기 비교 (막대)
sparkline추세·흐름 (선·영역)
sparkwinloss기준값 대비 승/패

시리즈 셀에는 그룹 안의 leaf 값 시퀀스가 들어갑니다.
소계·총계가 스칼라 하나로 합치는 것과 달리, 미니 차트는 여러 값을 한 셀에 보여 줍니다.

sparkbar

속성설명
minValue막대 축의 최솟값 지정 (기본값 0). 특정 값으로 고정할 경우 시리즈 간 스케일을 일치시킬 수 있습니다.
barColor막대 색. 기본 '#28a745'
renderer: { type: 'sparkbar', minValue: 0, barColor: '#28a745' }

sparkline

속성설명
curved곡선
lineColor선 색 (문자열 또는 배열)
areaColor영역 채움 색
minValue축 최소
renderer: {
  type: 'sparkline',
  curved: true,
  lineColor: '#638ec6',
  areaColor: '#007bff55',
}

sparkwinloss

속성설명
baseValue승/패 기준값
barColor승(win) 막대 색. 기본 '#28a745'
renderer: { type: 'sparkwinloss', baseValue: 10000, barColor: '#28a745' }

화면에서 바꾸기

시리즈의 종류, 색상, 곡선 등은 설정(config) 또는 API로 지정하며, UI 화면 메뉴에서는 아래 항목들만 제공합니다.

메뉴동작
차원 헤더 → 시리즈해당 차원 시리즈 표시 on/off
시리즈 헤더위치(요약 앞/뒤, 그룹 처음/끝), 시리즈 감추기

API로 바꾸기

const book = control.book;
const table = control.table;
const series = table.series.items.find((s) => s.prop('name') === 'series-line');
 
book.updateItem(series, {
  position: 'total',
  order: 'after',
  renderer: {
    type: 'sparkbar',
    barColor: '#2563eb',
  },
});
 
book.toggleProp(series, 'visible');

컬렉션은 table.series(PivotSeriesCollection)입니다.
옵션 변경 규칙은 개발 가이드를 참고하세요.

See Also

셀 오버레이탐색기(Explorer)