API 参考

FTreemapChartBuilder

本 API 页面目前提供英文正文。代码签名与标识符不随界面语言变化。

Fluent semantic builder for an automatically laid-out Treemap.

Field indexes are zero-based in the orientation-normalized dataset. Rendering needs at least one ordered hierarchy field and exactly one value field. Duplicate complete paths sum finite numeric values; blank, textual, non-finite, and final non-positive values do not render. Parent-owned facts add to child totals. Layout is automatic and navigation is disabled. The runtime defaults are banner parent labels and visible category-name leaf labels; labels may hide when their rectangle cannot fit the complete content.

Inheritance

Extends FChartBuilderBase. Its inherited members are available on this object.

Example

Sheet

TypeScript
const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getSheetByName('Sheet1')const chartInfo = fWorksheet  .newChart(univerAPI.Enum.ChartTypeString.Treemap)  .setSource('A1:D8')  .setHierarchyFields([0, 1, 2])  .setValueField(3)  .setParentLabelLayout(univerAPI.Enum.ChartTreemapParentLabelLayout.Banner)  .setTreemapLabel({ visible: true, color: '#334155' })  .build()await fWorksheet.insertChart(chartInfo)

Doc

TypeScript
const fDocument = univerAPI.getActiveDocument()const chartInfo = fDocument  .newChart(univerAPI.Enum.ChartTypeString.Treemap)  .setSource([    ['Region', 'Country', 'City', 'Sales'],    ['Europe', 'France', 'Paris', 120],    ['Asia', 'Japan', 'Tokyo', 180],  ])  .setHierarchyFields([0, 1, 2])  .setValueField(3)  .setParentLabelLayout(univerAPI.Enum.ChartTreemapParentLabelLayout.Banner)  .setTreemapLabel({ visible: true, color: '#334155' })  .build()await fDocument.insertChart(chartInfo)

Slide

TypeScript
const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const chartInfo = fSlide  .newChart(univerAPI.Enum.ChartTypeString.Treemap)  .setSource([    ['Region', 'Country', 'City', 'Sales'],    ['Europe', 'France', 'Paris', 120],    ['Asia', 'Japan', 'Tokyo', 180],  ])  .setHierarchyFields([0, 1, 2])  .setValueField(3)  .setParentLabelLayout(univerAPI.Enum.ChartTreemapParentLabelLayout.Banner)  .setTreemapLabel({ visible: true, color: '#334155' })  .build()await fSlide.insertChart(chartInfo)

Board

TypeScript
const fBoard = univerAPI.getActiveBoard()const chartInfo = fBoard  .newChart(univerAPI.Enum.ChartTypeString.Treemap)  .setSource([    ['Region', 'Country', 'City', 'Sales'],    ['Europe', 'France', 'Paris', 120],    ['Asia', 'Japan', 'Tokyo', 180],  ])  .setHierarchyFields([0, 1, 2])  .setValueField(3)  .setParentLabelLayout(univerAPI.Enum.ChartTreemapParentLabelLayout.Banner)  .setTreemapLabel({ visible: true, color: '#334155' })  .build()await fBoard.insertChart(chartInfo)

Setup

Register @univerjs-pro/engine-chart or a preset that includes it. In plugin mode, import @univerjs-pro/engine-chart/facade. Additional methods below require their listed plugin packages. See Facade setup.

@univerjs-pro/engine-chart

FTreemapChartBuilder.resetParentLabelLayout

Removes the explicit parent layout and restores the runtime banner default.

TypeScript
resetParentLabelLayout(): this

Returns

This builder for chaining.

Examples

TypeScript
builder.resetParentLabelLayout()

Package: @univerjs-pro/engine-chart · Type definitions

FTreemapChartBuilder.resetTreemapLabel

Removes explicit leaf-label style and restores visible category-name labels.

TypeScript
resetTreemapLabel(): this

Returns

This builder for chaining.

Examples

TypeScript
builder.resetTreemapLabel()

Package: @univerjs-pro/engine-chart · Type definitions

FTreemapChartBuilder.setHierarchyFields

Replaces the ordered root-to-leaf hierarchy with zero-based field indexes.

TypeScript
setHierarchyFields(indexes: readonly number[]): this

Parameters

  • indexes — Required. Ordered hierarchy field indexes.

Returns

This builder for chaining.

Examples

TypeScript
builder.setHierarchyFields([0, 1, 2])

Package: @univerjs-pro/engine-chart · Type definitions

FTreemapChartBuilder.setParentLabelLayout

Sets parent names to a reserved banner, overlapping text, or hidden.

TypeScript
setParentLabelLayout(layout: TreemapParentLabelLayout): this

Parameters

  • layout — Required. Parent-label layout mode.

Returns

This builder for chaining.

Examples

TypeScript
builder.setParentLabelLayout(univerAPI.Enum.ChartTreemapParentLabelLayout.Banner)

Types: TreemapParentLabelLayout

Package: @univerjs-pro/engine-chart · Type definitions

FTreemapChartBuilder.setTreemapLabel

Sets leaf visibility, content, and font appearance.

TypeScript
setTreemapLabel(label: DeepNullish<IChartTreemapLabelSpec>): this

Parameters

  • label — Required. Treemap leaf-label settings.

Returns

This builder for chaining.

Examples

TypeScript
builder.setTreemapLabel({ visible: true, color: '#334155' })

Types: DeepNullish · IChartTreemapLabelSpec

Package: @univerjs-pro/engine-chart · Type definitions

FTreemapChartBuilder.setValueField

Replaces the sole numeric value field with a zero-based field index.

TypeScript
setValueField(index: number): this

Parameters

  • index — Required. Numeric value field index.

Returns

This builder for chaining.

Examples

TypeScript
builder.setValueField(3)

Package: @univerjs-pro/engine-chart · Type definitions

你觉得这篇文档如何?

© 2026 DreamNum Co., Ltd.