go.js Panel中文API

类 Panel

GoJS® 图表组件
版本 3.0.26
由 Northwoods Software® 开发

继承层次结构 (查看完整结构)

• GraphObject (图形对象)

  • Panel (面板)

    • Part (部件)

Panel（面板）是一种 GraphObject（图形对象），它持有其他 GraphObject 作为其元素。Panel 负责调整其元素的大小和位置。Panel 的元素按照它们在 elements（元素）集合中出现的顺序进行绘制。

Part（部件）类继承自 Panel；Part 又是 Node（节点）和 Link（链接）的基类。

每个 Panel 都有一个 type（类型）并建立自己的坐标系。Panel 的类型决定了它如何调整大小和排列其元素：

• Panel.Position（位置面板）：用于根据元素在 Panel 本地坐标系中的绝对位置来排列元素。

• Panel.Vertical（垂直面板）和 Panel.Horizontal（水平面板）：用于创建线性的元素“堆栈”。

• Panel.Auto（自动面板）：用于调整主元素的大小以适配 Panel 中的其他元素——这可以创建边框效果。

• Panel.Spot（定位面板）：用于根据 Spot 属性 GraphObject.alignment（对齐方式）和 GraphObject.alignmentFocus（对齐焦点），相对于 Panel 的主元素来排列元素。Spot 面板可以通过使用 Panel.alignmentFocusName（对齐焦点名称）来相对于其他元素进行对齐。

• Panel.Table（表格面板）：用于将元素排列成行和列，通常利用不同元素的 GraphObject.row（行）、GraphObject.rowSpan（行跨度）、GraphObject.column（列）和 GraphObject.columnSpan（列跨度）属性。此 Panel 类型还使用 RowColumnDefinition（行列定义）。

• Panel.TableRow（表格行面板）和 Panel.TableColumn（表格列面板）：只能直接在 Panel.Table（表格面板）内部使用，用于将元素集合组织为表格中的一行或一列。

• Panel.Viewbox（视框面板）：用于自动调整单个元素的大小以适配面板的可用区域。

• Panel.Grid（网格面板）：不用于容纳典型元素，仅用于绘制规则的线条图案。元素必须是用于描述重复线条的 Shape（形状）。

• Panel.Link（链接面板）：仅由 Link（链接）部件和链接装饰（Link Adornments）使用。

• Panel.Graduated（刻度面板）：用于沿着主 Shape（形状）元素的路径绘制规则的刻度标记和文本。

构造函数的第一个参数可用于声明 Panel 类型。

javascript

// 两种方式均可：
new go.Panel(go.Panel.Horizontal, ...)
// 或：
new go.Panel("Horizontal", ...)// 完整示例：
p = new go.Panel("Horizontal",
{ width: 60, height: 60 }) // 面板属性
// 面板中的元素：
.add(
new go.Shape("Rectangle", { stroke: "lime" }),
new go.TextBlock("Some Text")
);

第一个参数也可以是 PanelLayout（面板布局）的实例，如果你想使用自定义面板布局。

关于大多数 Panel 类型的概述，请阅读 面板介绍页面。

Panel.Vertical（垂直面板）和 Panel.Horizontal（水平面板）经常用于将两个或多个 GraphObject 垂直上下排列或水平并排排列。对单个元素使用 GraphObject.alignment（对齐方式）或 GraphObject.stretch（拉伸）属性来控制它们的位置和大小。如果希望水平面板中的元素从右到左排列，或垂直面板中的元素从下到上排列，请将 isOpposite（是否反向）设置为 true。

Panel.Spot（定位面板）和 Panel.Auto（自动面板）有一个“主”元素，由 Panel 中第一个 GraphObject.isPanelMain（是否面板主元素）设置为 true 的元素表示。如果没有这样的元素，则使用第一个元素作为“主”元素。使用 GraphObject.alignment（对齐方式）属性来相对于主元素定位元素。使用 GraphObject.alignmentFocus（对齐焦点）属性来进一步指定在 Spot 面板内的位置。“Spot”和“Auto”面板应包含两个或更多元素。

在 Panel.Table（表格面板）中，您需要设置每个元素的 GraphObject.row（行）和 GraphObject.column（列）属性。当元素的表格单元格大于该元素时，GraphObject.alignment（对齐方式）和 GraphObject.stretch（拉伸）属性也很有用。

请阅读 表格面板介绍页面 获取更多示例和解释。

Panel.TableRow（表格行面板）和 Panel.TableColumn（表格列面板）只能作为 Panel.Table（表格面板）内部的元素使用。它们通常仅在项模板（item templates）中使用，例如，用于基于 itemArray（项数组）中提供的模型数据自动创建表格中的行。您仍然需要像它们是包含 Table 面板的直接元素一样，指定 TableRow 或 TableColumn 内各个元素的属性。

有关使用 TableRow 面板的示例，请参见 记录示例。

Panel.Grid（网格面板）通常用于图表的 Diagram.grid（图表网格）。

javascript

const diagram = new go.Diagram("myDiagramDiv",
// 图表选项：
{ ...,
grid: new go.Panel("Grid",
{ gridCellSize: new go.Size(40, 40) })
.add(
new go.Shape("LineH", { stroke: "lightgray" }),
new go.Shape("LineV", { stroke: "lightgray" })
),
...
});

或者实现绿色条形效果：

javascript

const diagram = new go.Diagram("myDiagramDiv",
{ ...,
grid: new go.Panel("Grid",
{ gridCellSize: new go.Size(100, 100) })
.add(new go.Shape("BarH", { fill: "lightgreen", height: 50 })),
...
});

但 Grid 面板也可以是独立的对象：

javascript

new go.Node("Grid",
{ gridCellSize: new go.Size(6, 6), width: 60, height: 60 })
.add(
new go.Shape("LineH", { stroke: "gray" }),
new go.Shape("LineV", { stroke: "gray" })
)

Grid 面板的元素不参与对象拾取（object picking）。

请阅读 网格图案介绍页面 获取更多示例和解释。

Panel.Graduated（刻度面板），像 Spot 和 Auto 面板一样，有一个“主”元素。Graduated 面板内的其他元素用于定义沿着主形状路径绘制的刻度和标签。

javascript

new go.Part("Graduated")
.add(
new go.Shape({ geometryString: "M0 0 H400" }),
new go.Shape({ geometryString: "M0 0 V10" }),
// 偏移以在刻度下方显示
new go.TextBlock({ segmentOffset: new go.Point(0, 12) })
)

只有 Graduated 面板的主形状参与对象拾取，但如果需要整个面板可拾取，可以设置 background（背景）。您不能设置或绑定 Graduated 面板的 Panel.itemArray（项数组）。Graduated 面板上刻度形状和文本块标签的事件将被忽略。Graduated 面板的文本块标签不可编辑。

旋转主形状不会旋转刻度，就像旋转 Spot 面板的主元素不会旋转其子元素一样。旋转通常应在 Panel 级别进行。与 Spot 面板的另一个相似之处是，Graduated 面板的大小调整通常应在主形状上进行。

请阅读 刻度面板介绍页面 获取更多示例和解释。

更改和访问 Panel 的元素

您可以通过调用 add（添加）、insertAt（在指定索引插入）、remove（移除）或 removeAt（移除指定索引）来更改 elements（元素）集合。您可以通过调用 elt（获取元素）直接访问特定元素。

或者，您可以通过设置或绑定 itemArray（项数组）属性来控制作为项模板副本的元素的数量和顺序。这将在下面讨论。

您可以使用 findObject（查找对象）在 Panel 的可视树中搜索具有给定 GraphObject.name（名称）的 GraphObject。

Panel 大小和外观

面板通常根据其元素和 Panel type（类型）计算自身大小，但也可以通过设置 GraphObject.desiredSize（期望大小）、GraphObject.minSize（最小大小）和 GraphObject.maxSize（最大大小）来调整大小。在 Panel 上设置显式大小可能会导致该面板的嵌套元素不同地调整自身大小，特别是在嵌套元素具有 GraphObject.stretch（拉伸）值或 TextBlock（文本块）具有自动换行（word wrap）的情况下。

除非指定了 GraphObject.background（背景），或者为整个 Table 面板或单个 RowColumnDefinition（行列定义）指定了分隔符（separators）默认值，否则面板自身没有可视组件。面板可以指定 padding（内边距），以使面板（包括其背景）更大。当 Panel 的大小受到约束时设置内边距将减少其排列元素的总面积。设置外边距（margin）不会这样做——相反，Panel 会扩大尺寸。

除了仅由特定类型面板使用的元素上的 GraphObject（图形对象）属性外，几个 Panel 属性仅适用于特定的 Panel 类型。

• type（类型）为 Panel.Table（表格面板）的面板使用 rowCount（行数）、rowSizing（行尺寸调整方式）、columnCount（列数）、columnSizing（列尺寸调整方式）、leftIndex（左侧起始索引）、topIndex（顶部起始索引）以及所有“默认”分隔符属性。

• type（类型）为 Panel.TableRow（表格行面板）和 Panel.TableColumn（表格列面板）的面板不像常规的 GraphObject 那样工作，而是只能直接在 Panel.Table（表格面板）内部使用。它们是传递性容器，为其父表保存元素，并忽略它们自身的缩放和角度。

• type（类型）为 Panel.Grid（网格面板）的面板使用 gridCellSize（网格单元大小）和 gridOrigin（网格原点）属性。

• type（类型）为 Panel.Viewbox（视框面板）的面板使用 viewboxStretch（视框拉伸方式）属性。

• type（类型）为 Panel.Graduated（刻度面板）的面板使用 graduatedMin（刻度最小值）、graduatedMax（刻度最大值）、graduatedTickUnit（刻度单位）和 graduatedTickBase（刻度基准）属性。

有关所有 Panel 类型的实时示例，请参见 面板介绍页面。

数据绑定

面板还提供对数据绑定的基本支持。当图表获取新模型或图表的模型使用附加数据增强时，图表会自动创建一个新的 Node 或 Link，其 data（数据）属性引用相应的节点数据或链接数据对象。

有关数据绑定的更多讨论，请阅读 模型介绍页面 和 数据绑定。

面板支持基于 JavaScript 数组中的项自动创建面板内的元素。这是通过设置或绑定 itemArray（项数组）属性来实现的，其行为方式类似于 Model.nodeDataArray（节点数据数组）属性。您可以提供一个 itemTemplate（项模板），它本身必须是一个简单的 Panel，该模板会被复制以创建此容器 Panel 中的元素，对应于 itemArray 中的每个项。此属性类似于 Diagram.nodeTemplate（节点模板）属性，尽管对于图表，模板必须是 Node（节点）、Group（组）或简单的 Part（部件）。

与 Diagram.nodeTemplateMap（节点模板映射）非常相似，Panel 的 itemTemplateMap（项模板映射）支持拥有多个模板，因此可以为数据项动态选择创建的元素的实际结构。正如 Model.nodeCategoryProperty（节点类别属性）决定复制 Diagram.nodeTemplateMap 中的哪个模板来创建 Node 一样，itemCategoryProperty（项类别属性）命名了一个数据属性，其值选择 itemTemplateMap 中的 Panel 来复制该项。

当绑定 itemArray（项数组）属性时，通常将 Model.copiesArrays（复制数组）和 Model.copiesArrayObjects（复制数组对象）属性设置为 true，以便在复制节点时，项数组及其内容被复制而不是共享。或者更一般地说，要自定义模型的复制过程，您可以提供自定义的 Model.copyNodeDataFunction（复制节点数据函数）。

有关项数组的更多讨论和示例，请阅读 项数组介绍页面。

构造函数

constructor（构造函数）

访问器 (Accessors)

alignmentFocusName（对齐焦点名称）
columnCount（列数）[只读]
columnSizing（列尺寸调整方式）
data（数据）
defaultAlignment（默认对齐方式）
defaultColumnSeparatorDashArray（默认列分隔虚线图案）
defaultColumnSeparatorStroke（默认列分隔线颜色）
defaultColumnSeparatorStrokeWidth（默认列分隔线宽度）
defaultRowSeparatorDashArray（默认行分隔虚线图案）
defaultRowSeparatorStroke（默认行分隔线颜色）
defaultRowSeparatorStrokeWidth（默认行分隔线宽度）
defaultSeparatorPadding（默认分隔符内边距）
defaultStretch（默认拉伸方式）
elements（元素）[只读]
graduatedMax（刻度最大值）
graduatedMin（刻度最小值）
graduatedRange（刻度范围）[只读]
graduatedTickBase（刻度基准）
graduatedTickUnit（刻度单位）
gridCellSize（网格单元大小）
gridOrigin（网格原点）
isClipping（是否裁剪）
isEnabled（是否启用）
isOpposite（是否反向）
itemArray（项数组）
itemCategoryProperty（项类别属性）
itemIndex（项索引）[只读]
itemTemplate（项模板）
itemTemplateMap（项模板映射）
leftIndex（左侧起始索引）
padding（内边距）
rowCount（行数）[只读]
rowSizing（行尺寸调整方式）
topIndex（顶部起始索引）
type（类型）
viewboxStretch（视框拉伸方式）

方法 (Methods)

add（添加）
addColumnDefinition（添加列定义）
addRowColumnDefinition（添加行列定义）
addRowDefinition（添加行定义）
copy（复制）[重写]
copyTemplate（复制模板）
elt（获取元素）
findColumnForLocalX（根据局部X坐标查找列）
findItemPanelForData（根据数据查找项面板）
findMainElement（查找主元素）
findObject（查找对象）
findRowForLocalY（根据局部Y坐标查找行）
getColumnDefinition（获取列定义）
getRowDefinition（获取行定义）
graduatedPointForValue（根据值获取刻度点）
graduatedValueForPoint（根据点获取刻度值）
insertAt（在指定索引插入）
rebuildItemElements（重建项元素）
remove（移除）
removeAt（移除指定索引）
removeColumnDefinition（移除列定义）
removeRowDefinition（移除行定义）
updateTargetBindings（更新目标绑定）
definePanelLayout（定义面板布局）[静态]

属性 (Properties) [静态, 只读]

Auto（自动面板布局）
Graduated（刻度面板布局）
Grid（网格面板布局）
Horizontal（水平面板布局）
Link（链接面板布局）
Position（位置面板布局）
Spot（定位面板布局）
Table（表格面板布局）
TableColumn（表格列面板布局）
TableRow（表格行面板布局）
Vertical（垂直面板布局）
Viewbox（视框面板布局）

构造函数

constructor

• new Panel(type?: string | PanelLayout, init?: Partial<Panel>): Panel

构造一个指定类型的空 Panel。默认类型是 Panel.Position（位置面板）。面板类型必须是 PanelLayout（面板布局）的静态值之一，例如 Panel.Position。也可以使用字符串值，例如 "Auto"。

用法示例：

javascript

const p = new go.Panel("Auto", {
margin: 5,
background: "red"
});

参数

可选 type: string | PanelLayout

一个字符串或 PanelLayout，例如 "Horizontal" 或 Panel.Vertical。如果未提供，默认的 Panel 类型是 "Position"。

可选 init: Partial<Panel>

可选的初始化属性。

返回 Panel

• new Panel(init?: Partial<Panel>): Panel

构造一个空 Panel。默认类型是 Panel.Position（位置面板）。

参数

可选 init: Partial<Panel>

可选的初始化属性。

返回 Panel

访问器 (Accessors)

alignmentFocusName

: string

对于作为 Spot 面板元素的 Panels：获取或设置此 Panel 的元素的名称，该元素应用作对齐对象而不是此 Panel 本身。

这允许 Spot 面板对齐嵌套在其自身元素树中的对象。

columnCount [只读]

: number

对于 "Table"（表格）Panels：此只读属性返回列数。此值仅在 Panel 被测量后有效。

columnSizing

: Sizing（尺寸调整方式）

对于 "Table"（表格）Panels：获取或设置此 Panel 的列如何处理额外空间。有效值为 Sizing（尺寸调整方式）值。默认为 Sizing.ProportionalExtra（按比例分配额外空间）。

参见

• RowColumnDefinition.sizing（行列定义尺寸调整方式）

• rowSizing（行尺寸调整方式）

data

: any

获取或设置此面板数据绑定到的可选模型数据。如果这是一个 Part（部件），则数据必须是一个 JavaScript 对象。如果这是一个为绑定到 itemArray（项数组）属性的数组中的项而创建的 Panel（面板），则数据可以是任何 JavaScript 值。默认值为 null。

将其设置为新值会自动调用 updateTargetBindings（更新目标绑定），以便为所有数据绑定的 GraphObject 属性分配新值。

一旦设置此属性，您就不能添加、删除或修改此 Panel 可视树中任何 GraphObject 上的任何数据绑定。您只能在设置此属性之前设置数据绑定。

defaultAlignment

: Spot（对齐点）

对于 "Auto"（自动）和 "Spot"（定位）Panels：获取或设置此 Panel 中元素的默认 GraphObject.alignment（对齐方式）值。默认为 Spot.Default（默认对齐点）。

defaultColumnSeparatorDashArray

: string

对于 "Table"（表格）Panels：获取或设置默认的列分隔符虚线图案。默认为空字符串（表示实线）。

此属性用于未设置其 RowColumnDefinition.separatorDashArray（分隔符虚线图案）的行列定义。

defaultColumnSeparatorStroke

: string | Brush（画刷）

对于 "Table"（表格）Panels：获取或设置默认的列分隔符笔触（颜色）。默认为 null（表示无分隔符）。

此属性用于未设置其 RowColumnDefinition.separatorStroke（分隔符笔触）的行列定义。

defaultColumnSeparatorStrokeWidth

: number

对于 "Table"（表格）Panels：获取或设置默认的列分隔符笔触宽度。默认为 1。

此属性用于未设置其 RowColumnDefinition.separatorStrokeWidth（分隔符笔触宽度）的行列定义。

defaultRowSeparatorDashArray

: string

对于 "Table"（表格）Panels：获取或设置默认的行分隔符虚线图案。默认为空字符串（表示实线）。

此属性用于未设置其 RowColumnDefinition.separatorDashArray（分隔符虚线图案）的行列定义。

defaultRowSeparatorStroke

: string | Brush（画刷）

对于 "Table"（表格）Panels：获取或设置默认的行分隔符笔触（颜色）。默认为 null（表示无分隔符）。

此属性用于未设置其 RowColumnDefinition.separatorStroke（分隔符笔触）的行列定义。

defaultRowSeparatorStrokeWidth

: number

对于 "Table"（表格）Panels：获取或设置默认的行分隔符笔触宽度。默认为 1。

此属性用于未设置其 RowColumnDefinition.separatorStrokeWidth（分隔符笔触宽度）的行列定义。

defaultSeparatorPadding

: MarginLike（边距类型）

对于 "Table"（表格）Panels：获取或设置默认的分隔符内边距。默认为 Margin(0, 0, 0, 0)（无边距）。

此属性用于未设置其 RowColumnDefinition.separatorPadding（分隔符内边距）的行列定义。

defaultStretch

: Stretch（拉伸方式）

对于 "Auto"（自动）和 "Spot"（定位）Panels：获取或设置此 Panel 中元素的默认 GraphObject.stretch（拉伸方式）值。默认为 Stretch.Default（默认拉伸方式）。

elements [只读]

: List<GraphObject>（图形对象列表）

此只读属性返回此 Panel 的元素的 List（列表）。您不能替换整个列表，但可以调用 add（添加）、insertAt（在指定索引插入）、remove（移除）和 removeAt（移除指定索引）来修改列表。

graduatedMax

: number

对于 "Graduated"（刻度）Panels：获取或设置沿主形状路径的最大值。默认为 100。

graduatedMin

: number

对于 "Graduated"（刻度）Panels：获取或设置沿主形状路径的最小值。默认为 0。

graduatedRange [只读]

: number

对于 "Graduated"（刻度）Panels：此只读属性返回 graduatedMax（刻度最大值）和 graduatedMin（刻度最小值）之间的差值。

graduatedTickBase

: number

对于 "Graduated"（刻度）Panels：获取或设置刻度值计算的基准值。默认为 0。

graduatedTickUnit

: number

对于 "Graduated"（刻度）Panels：获取或设置刻度之间的单位值。默认为 10。

gridCellSize

: Size（尺寸）

对于 "Grid"（网格）Panels：获取或设置网格单元的尺寸。默认为 Size(10, 10)。

gridOrigin

: Point（点）

对于 "Grid"（网格）Panels：获取或设置网格的原点。默认为 Point(0, 0)。

isClipping

: boolean

获取或设置此 Panel 是否应裁剪其内容。默认为 false。

isEnabled

: boolean

获取或设置此 Panel 是否响应输入事件。默认为 true。

isOpposite

: boolean

对于 "Vertical"（垂直）和 "Horizontal"（水平）Panels：获取或设置元素是否应从右到左（对于水平面板）或从下到上（对于垂直面板）排列。默认为 false。

itemArray

: any[] | List<any>

获取或设置此 Panel 的项数组。这通常是一个 JavaScript 数组，但也可以是 List（列表）。

设置此属性将导致 Panel 清除其 elements（元素）集合并重新构建其元素，为数组中的每个项创建一个新元素。每个新元素都是通过复制 itemTemplate（项模板）或 itemTemplateMap（项模板映射）中的 Panel 创建的。每个新元素的数据属性将设置为数组中的相应项。

如果此属性设置为非数组值，Panel 将清除其元素。

itemCategoryProperty

: string

获取或设置数据属性名称，用于从 itemTemplateMap（项模板映射）中选择模板。默认为空字符串。

itemIndex [只读]

: number

对于作为 itemArray（项数组）元素的 Panels：此只读属性返回此 Panel 在其父级的 itemArray 中的索引。

itemTemplate

: Panel

获取或设置用作模板的 Panel，用于为 itemArray（项数组）中的每个项创建元素。

itemTemplateMap

: Map<string, Panel>

获取或设置一个 Map，将类别名称映射到模板 Panel，用于为 itemArray（项数组）中的每个项创建元素。类别由 itemCategoryProperty（项类别属性）确定。

leftIndex

: number

对于 "Table"（表格）Panels：获取或设置最左侧可见列的索引。默认为 0。

padding

: MarginLike（边距类型）

获取或设置 Panel 内容周围的内边距。默认为 Margin(0, 0, 0, 0)（无边距）。

rowCount [只读]

: number

对于 "Table"（表格）Panels：此只读属性返回行数。此值仅在 Panel 被测量后有效。

rowSizing

: Sizing（尺寸调整方式）

对于 "Table"（表格）Panels：获取或设置此 Panel 的行如何处理额外空间。有效值为 Sizing（尺寸调整方式）值。默认为 Sizing.ProportionalExtra（按比例分配额外空间）。

参见

• RowColumnDefinition.sizing（行列定义尺寸调整方式）

• columnSizing（列尺寸调整方式）

topIndex

: number

对于 "Table"（表格）Panels：获取或设置最顶部可见行的索引。默认为 0。

type

: string

获取或设置此 Panel 的类型。类型必须是 PanelLayout（面板布局）的静态值之一，例如 Panel.Position（位置面板）。也可以使用字符串值，例如 "Auto"。

viewboxStretch

: Stretch（拉伸方式）

对于 "Viewbox"（视框）Panels：获取或设置视框的拉伸方式。默认为 Stretch.Uniform（等比例拉伸）。

方法 (Methods)

add

• add(...elements: GraphObject[]): Panel

将一个或多个 GraphObject 添加到此 Panel 的 elements（元素）集合的末尾。此方法返回此 Panel。

参数

...elements: GraphObject[]

要添加的 GraphObject。

返回 Panel

addColumnDefinition

• addColumnDefinition(column: number, def: RowColumnDefinition): void

对于 "Table"（表格）Panels：在指定列索引处添加一个 RowColumnDefinition（行列定义）。

参数

column: number

列索引。

def: RowColumnDefinition

要添加的行列定义。

返回 void

addRowColumnDefinition

• addRowColumnDefinition(index: number, def: RowColumnDefinition, isRow: boolean): void

对于 "Table"（表格）Panels：在指定索引处添加一个 RowColumnDefinition（行列定义）。

参数

index: number

行或列的索引。

def: RowColumnDefinition

要添加的行列定义。

isRow: boolean

如果为 true，则添加为行定义；如果为 false，则添加为列定义。

返回 void

addRowDefinition

• addRowDefinition(row: number, def: RowColumnDefinition): void

对于 "Table"（表格）Panels：在指定行索引处添加一个 RowColumnDefinition（行列定义）。

参数

row: number

行索引。

def: RowColumnDefinition

要添加的行列定义。

返回 void

copy

• copy(): Panel

创建此 Panel 的浅拷贝，包括其所有元素。此方法重写了 GraphObject.copy（图形对象复制方法）。

返回 Panel

copyTemplate

• copyTemplate(category?: string): Panel

复制 itemTemplate（项模板）或 itemTemplateMap（项模板映射）中的模板 Panel。

参数

可选 category: string

要复制的模板的类别。如果未提供，则使用 itemTemplate。

返回 Panel

elt

• elt(idx: number): GraphObject | null

返回此 Panel 的 elements（元素）集合中指定索引处的元素。

参数

idx: number

元素的索引。

返回 GraphObject | null

findColumnForLocalX

• findColumnForLocalX(x: number): number

对于 "Table"（表格）Panels：返回包含给定局部 X 坐标的列索引。

参数

x: number

局部 X 坐标。

返回 number

findItemPanelForData

• findItemPanelForData(data: any): Panel | null

查找其 data（数据）属性等于给定数据的项 Panel。

参数

data: any

要查找的数据。

返回 Panel | null

findMainElement

• findMainElement(): GraphObject | null

对于 "Auto"（自动）、"Spot"（定位）和 "Graduated"（刻度）Panels：返回此 Panel 的“主”元素。这是第一个 GraphObject.isPanelMain（是否面板主元素）设置为 true 的元素，如果没有这样的元素，则返回第一个元素。

返回 GraphObject | null

findObject

• findObject(name: string): GraphObject | null

在此 Panel 的可视树中查找具有给定 GraphObject.name（名称）的第一个 GraphObject。

参数

name: string

要查找的 GraphObject 的名称。

返回 GraphObject | null

findRowForLocalY

• findRowForLocalY(y: number): number

对于 "Table"（表格）Panels：返回包含给定局部 Y 坐标的行索引。

参数

y: number

局部 Y 坐标。

返回 number

getColumnDefinition

• getColumnDefinition(column: number): RowColumnDefinition | null

对于 "Table"（表格）Panels：返回指定列的 RowColumnDefinition（行列定义）。

参数

column: number

列索引。

返回 RowColumnDefinition | null

getRowDefinition

• getRowDefinition(row: number): RowColumnDefinition | null

对于 "Table"（表格）Panels：返回指定行的 RowColumnDefinition（行列定义）。

参数

row: number

行索引。

返回 RowColumnDefinition | null

graduatedPointForValue

• graduatedPointForValue(val: number): Point

对于 "Graduated"（刻度）Panels：返回沿主形状路径对应于给定值的点。

参数

val: number

沿主形状路径的值。

返回 Point

graduatedValueForPoint

• graduatedValueForPoint(pt: Point): number

对于 "Graduated"（刻度）Panels：返回给定点沿主形状路径对应的值。

参数

pt: Point

主形状路径上的点。

返回 number

insertAt

• insertAt(idx: number, ...elements: GraphObject[]): Panel

将一个或多个 GraphObject 插入到此 Panel 的 elements（元素）集合中的指定索引处。此方法返回此 Panel。

参数

idx: number

要插入的索引。

...elements: GraphObject[]

要插入的 GraphObject。

返回 Panel

rebuildItemElements

• rebuildItemElements(): void

根据当前的 itemArray（项数组）重建此 Panel 的元素。通常不需要调用此方法，因为设置 itemArray 会自动重建元素。

返回 void

remove

• remove(element: GraphObject): boolean

从此 Panel 的 elements（元素）集合中移除给定的 GraphObject。

参数

element: GraphObject

要移除的 GraphObject。

返回 boolean

如果成功移除则返回 true。

removeAt

• removeAt(idx: number): boolean

从此 Panel 的 elements（元素）集合中移除指定索引处的 GraphObject。

参数

idx: number

要移除的元素的索引。

返回 boolean

如果成功移除则返回 true。

removeColumnDefinition

• removeColumnDefinition(column: number): boolean

对于 "Table"（表格）Panels：移除指定列的 RowColumnDefinition（行列定义）。

参数

column: number

列索引。

返回 boolean

如果成功移除则返回 true。

removeRowDefinition

• removeRowDefinition(row: number): boolean

对于 "Table"（表格）Panels：移除指定行的 RowColumnDefinition（行列定义）。

参数

row: number

行索引。

返回 boolean

如果成功移除则返回 true。

updateTargetBindings

• updateTargetBindings(srcprop?: string): void

更新此 Panel 可视树中所有 GraphObject 上的所有数据绑定。通常不需要调用此方法，因为设置 data（数据）属性会自动调用此方法。

参数

可选 srcprop: string

可选的要更新的源属性名称。

返回 void

definePanelLayout [静态]

• definePanelLayout(name: string, layout: PanelLayout): void

定义一个自定义面板布局。有关更多信息，请阅读 自定义面板布局。

参数

name: string

新布局的名称。

layout: PanelLayout

PanelLayout 实例。

返回 void

属性 (Properties) [静态, 只读]

Auto

• readonly Auto: PanelLayout = ...

“Auto”面板布局。此面板类型自动调整其主元素的大小以适配其他元素。

Graduated

• readonly Graduated: PanelLayout = ...

“Graduated”面板布局。此面板类型沿主形状路径绘制刻度标记和文本。

Grid

• readonly Grid: PanelLayout = ...

“Grid”面板布局。此面板类型绘制规则的线条图案。

Horizontal

• readonly Horizontal: PanelLayout = ...

“Horizontal”面板布局。此面板类型水平排列其元素。

Link

• readonly Link: PanelLayout = ...

“Link”面板布局。此面板类型由 Link 部件使用。

Position

• readonly Position: PanelLayout = ...

“Position”面板布局。此面板类型根据元素的绝对位置排列元素。

Spot

• readonly Spot: PanelLayout = ...

“Spot”面板布局。此面板类型相对于主元素排列元素。

Table

• readonly Table: PanelLayout = ...

“Table”面板布局。此面板类型将元素排列成行和列。

TableColumn

• readonly TableColumn: PanelLayout = ...

“TableColumn”面板布局。此面板类型只能直接在 Table 面板内部使用，用于将元素组织为表格中的一列。

TableRow

• readonly TableRow: PanelLayout = ...

“TableRow”面板布局。此面板类型只能直接在 Table 面板内部使用，用于将元素组织为表格中的一行。

Vertical

• readonly Vertical: PanelLayout = ...

“Vertical”面板布局。此面板类型垂直排列其元素。

Viewbox

• readonly Viewbox: PanelLayout = ...

“Viewbox”面板布局。此面板类型自动调整单个元素的大小以适配面板的可用区域。