피벗 테이블과 차트

setPivot()은 행을 요약 표로 바꿉니다. rows에 넣은 필드가 행이 되고, 둘 이상이면 앞쪽 필드는 소계가 붙은 그룹이 됩니다. columns에 넣은 필드는 위쪽에 열 그룹으로 펼쳐지고, 값마다 합계 열이 붙습니다. 값은 기본으로 더하며, 필요하면 'avg',…

실행 예제피벗 테이블과 차트

원하는 기준으로 행을 요약하고, 셀을 막대·꺾은선·원형 차트로 바꿉니다.

이 데모의 코드

import { createGrid, type ChartHandle, type ColumnDef } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const columns: ColumnDef[] = [
    { field: 'country', header: h('Country', '국가'), width: 150 },
    { field: 'company', header: h('Company', '회사'), width: 140 },
    { field: 'status', header: h('Status', '상태'), width: 110 },
    { field: 'name', header: h('Name', '이름'), width: 160 },
    { field: 'q1', header: h('Q1', '1분기'), type: 'number', format: '#,##0', width: 110 },
    { field: 'q2', header: h('Q2', '2분기'), type: 'number', format: '#,##0', width: 110 },
    { field: 'q3', header: h('Q3', '3분기'), type: 'number', format: '#,##0', width: 110 },
    { field: 'q4', header: h('Q4', '4분기'), type: 'number', format: '#,##0', width: 110 },
    { field: 'total', header: h('Annual revenue', '연매출'), type: 'number', format: '#,##0', width: 130 },
  ];
  const grid = createGrid(ctx.host, {
    columns,
    data: makeRows(2000),
    locale: lang,
    theme: 'board',
    sideBar: { open: true, panels: ['pivot', 'columns', 'filters'] },
    pivot: { rows: ['country'], columns: ['status'], values: [{ colId: 'total', aggFunc: 'sum' }] },
  });
  grid.on('pivotChange', e => ctx.log(`pivotChange → ${e.pivot ? JSON.stringify(e.pivot) : 'off'}`));

  let chart: ChartHandle | null = null;
  const draw = (type: 'bar' | 'stackedBar' | 'line' | 'pie') => {
    chart?.destroy();
    grid.setRange(null);
    chart = grid.createChart({ type, title: h('Revenue by country', '국가별 매출') });
  };

  text(ctx, h('Build the pivot in the panel on the right, or drag across cells and right-click for a chart.',
    '오른쪽 패널에서 피벗을 구성하거나, 셀을 드래그한 뒤 우클릭해 차트를 만들어 보세요.'));
  separator(ctx);
  button(ctx, h('Country × status', '국가 × 상태'), () => grid.setPivot({ rows: ['country'], columns: ['status'], values: [{ colId: 'total' }] }));
  button(ctx, h('Country › company, quarterly averages', '국가 › 회사, 분기 평균'), () =>
    grid.setPivot({ rows: ['country', 'company'], values: ['q1', 'q2', 'q3', 'q4'].map(colId => ({ colId, aggFunc: 'avg' as const })) }));
  button(ctx, h('Normal view', '일반 보기'), () => grid.setPivot(null));
  separator(ctx);
  button(ctx, h('Stacked bar chart', '누적 막대 차트'), () => draw('stackedBar'));
  button(ctx, h('Line chart', '꺾은선 차트'), () => draw('line'));
  button(ctx, h('Pie chart', '원형 차트'), () => draw('pie'));
  return grid;
}

setPivot()은 행을 요약 표로 바꿉니다. rows에 넣은 필드가 행이 되고, 둘 이상이면 앞쪽 필드는 소계가 붙은 그룹이 됩니다. columns에 넣은 필드는 위쪽에 열 그룹으로 펼쳐지고, 값마다 합계 열이 붙습니다. 값은 기본으로 더하며, 필요하면 'avg', 'min', 'max', 'count'를 고르세요. 소계는 원래 행에서 다시 계산하므로 평균도 정확합니다. 피벗 표도 일반 보기처럼 정렬, 필터, 내보내기, 차트가 모두 되고, setPivot(null)이면 원래 행으로 돌아옵니다. 사이드바에 'pivot' 패널을 넣으면 사용자가 직접 피벗을 구성할 수 있습니다.

셀을 드래그해 선택한 뒤 우클릭해서 차트를 고르세요. 첫 번째 글자 컬럼이 항목 이름이 되고, 숫자 컬럼이 계열이 됩니다. 차트는 그리드 위 패널에 열리며 막대, 누적 막대, 꺾은선, 영역, 막대·꺾은선, 원형, 도넛, 분산형으로 바꿀 수 있고, 셀 값이 바뀌면 다시 그려집니다. 코드에서는 createChart()로 같은 일을 하고, container를 주면 페이지 어디에든 차트를 넣을 수 있습니다.

// Sales by country (rows) and year (columns), with totals
grid.setPivot({
  rows: ['region', 'country'],        // region becomes a group with subtotals
  columns: ['year'],
  values: [{ colId: 'sales', aggFunc: 'sum' }, { colId: 'margin', aggFunc: 'avg' }],
});
grid.setPivot(null);                   // back to the normal rows

// Let people build it themselves
createGrid(el, { columns, data, sideBar: { open: true, panels: ['pivot', 'columns'] } });

// Charts: the selected range, or everything on screen
const chart = grid.createChart({ type: 'bar', title: 'Sales' });
chart.setType('line');
grid.createChart({ type: 'pie', container: document.querySelector('#chart') });

// Without a grid
import { renderChart } from '@freegridjs/core';
renderChart(el, { type: 'line', categories: ['Jan', 'Feb'], series: [{ name: 'Sales', values: [120, 180] }] });