🎉 RealPivot2 v2.0.0 출시! 자세히 보기 →
가이드
피벗 시리즈

피벗 시리즈

소계·총계 옆 등에 별도 열·행을 두고, 그 셀에 미니 차트(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가 켜져 있으면 행시리즈만, 꺼져 있으면 열시리즈만 표시된다.

표현 방식 (renderer)

renderer.type에는 '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로 피벗 시리즈를 조회하고 변경한다. 옵션 변경 규칙은 개발 가이드를 참고한다.

See Also

셀 오버레이탐색기(Explorer)