Web SDK

대시보드와 피벗 뷰

Plugin 정보

피벗 뷰는 지역별 매출처럼 테이블 데이터를 요약합니다. 대시보드는 차트, 필터, 텍스트, 이미지를 한 페이지에 구성합니다. 각 기능은 별도 플러그인으로 제공되며 로컬 표시에는 공동 편집이 필요하지 않습니다.

플러그인 등록

Bases 핵심 및 UI 플러그인 뒤에 등록하세요.

Shell
pnpm add @univerjs-pro/bases-dashboard @univerjs-pro/bases-dashboard-ui
TypeScript
import { UniverBaseDashboardPlugin } from '@univerjs-pro/bases-dashboard'import { UniverBaseDashboardUIPlugin } from '@univerjs-pro/bases-dashboard-ui'import '@univerjs-pro/bases-dashboard/facade'univer.registerPlugin(UniverBaseDashboardPlugin)univer.registerPlugin(UniverBaseDashboardUIPlugin)

추가한 패키지의 언어 리소스를 애플리케이션에 병합하세요. 플러그인은 차트, 문서, 도형 의존성을 선언합니다. 해당 의존성의 설정을 사용자 지정하려면 먼저 등록하세요.

매출 피벗 뷰 생성

다음 예제는 테이블을 만들고 지역별로 매출을 집계합니다.

TypeScript
import { PivotTableFiledAreaEnum } from '@univerjs-pro/engine-pivot'const base = univerAPI.getActiveBase()if (!base) throw new Error('Open a Base first')const table = base.insertTable('Orders', { primaryFieldName: 'Region' })const revenue = table.addField('Revenue', univerAPI.Enum.BaseFieldType.Number)table.addRecords([  { values: { [table.getPrimaryFieldId()]: 'East', [revenue.getId()]: 120 } },  { values: { [table.getPrimaryFieldId()]: 'West', [revenue.getId()]: 80 } },])const pivot = base.createPivotView('Revenue by region', table.getId())const pivotTable = pivot.getPivotTable()pivotTable.addFieldWithSourceId(table.getPrimaryFieldId(), PivotTableFiledAreaEnum.Row)pivotTable.addFieldWithSourceId(revenue.getId(), PivotTableFiledAreaEnum.Value)pivot.updateConfig({ pivot: pivotTable.toJSON(), displayMode: 'chart-and-table' })const baseUI = univerAPI.getBaseUI()await baseUI.activateTable(table.getId())await baseUI.activateView(pivot.getId())

getPivotTable()은 분리된 계산 모델을 반환합니다. 수정 후 updateConfig()를 호출하여 변경 사항을 Base에 저장하세요. displayMode에는 table, chart, chart-and-table을 사용할 수 있습니다.

대시보드에 차트 추가

TypeScript
const dashboard = base.createDashboard('Sales overview')dashboard.addPivotChart(table.getId(), pivot.getId(), {  title: 'Revenue by region',  layout: { column: 0, row: 0, columnSpan: 6, rowSpan: 6 },})

차트는 기존 피벗 뷰를 참조합니다. 집계 필드와 계산은 뷰가 관리하고 레이아웃과 표시는 대시보드가 관리합니다. Bases 사이드바에서 새 대시보드를 여세요.

addTableFilter(), addText(), addImage(), addFormulaShape()로 필터, 서식 있는 텍스트, 이미지, 수식 도형을 추가하세요. getWidgets()로 위젯을 읽고 removeWidget()으로 제거하세요.

저장 및 권한

base.save()로 대시보드 리소스를 포함한 전체 스냅샷을 저장하세요. 테이블 레코드만 저장하면 이 설정이 손실됩니다. 스냅샷을 복원하기 전에 대시보드 플러그인을 등록하세요.

대시보드와 피벗 뷰는 개별 읽기 전용 설정을 위한 getPermission()을 제공합니다. 권한을 참고하세요. 전체 API는 Bases Facade에서 확인할 수 있습니다.

이 가이드는 어떠셨나요?

© 2026 DreamNum Co., Ltd.