跳到主要内容

形状的基本集合

DHTMLX Diagram 库为您提供了一系列可用于构建图表的形状集合。每种 Diagram 模式：默认、组织结构图、思维导图 和 PERT，都拥有一套基本形状类型集合。

提示

您可以将任意类型的形状添加到以任意模式初始化的图表中。在准备要加载到图表中的数据集时，将所需形状的名称用作形状对象中 type 属性的值。

请参阅形状对象的完整配置属性列表。

默认模式下的形状​

在 Diagram 的 default 模式下，基本集合包括流程图形状。请查看可用的流程图形状类型：

此外还有 "text" 项，它表示可作为形状在图表中使用并与其他形状连接的简单文本。

相关示例： Diagram 编辑器。默认模式。宽幅流程图

备注

您可以在 Diagram 的默认模式下对形状进行分组。请查看相关指南。

属性​

请查看 Diagram default 模式下的形状以及流程图形状和 "text" 项的特有配置属性。

组织结构图模式下的形状​

在 Diagram 的组织结构图模式下，基本集合包括两种类型的形状："card" 和 "img-card"。

每个 "card" 类型的形状都包含文本和一条彩色标题线。处于同一层级的形状拥有相同颜色的标题。下面的组织结构图中展示了 "card" 形状的示例：

相关示例： Diagram。组织结构图模式。基础初始化

"img-card" 类型可用于添加带图像的形状。请记得通过形状对象的 img 属性为卡片提供图像。下面的组织结构图使用 "img-card" 类型的形状构建而成：

相关示例： Diagram 编辑器。组织结构图模式。基础初始化

属性​

请查看 Diagram 组织结构图模式下的形状、"card" 形状 以及 "img-card" 形状的特有配置属性。

思维导图模式下的形状​

在 Diagram 的 mindmap 模式下，"topic" 类型的形状是基本形状。每个形状都包含文本和一条彩色边框。轮廓的颜色取决于该形状所属的层级。下面的思维导图中给出了 "topic" 形状的示例：

相关示例： Diagram。思维导图模式。基础初始化

属性​

请查看 Diagram mindmap 模式下的形状以及 "topic" 形状的特有配置属性。

PERT 模式下的形状​

Diagram 的 PERT 模式下的基本形状类型包括：

  • "task" 类型 - 一种包含标题并渲染日期和持续时间的形状：

  • "milestone" 类型 - 一种没有持续时间、用于表示项目关键节点的形状：

相关示例： Diagram。PERT 图。初始化

属性​

请查看 "task" 形状、"milestone" 形状以及 "project" 分组的特有配置属性。

设置形状的类型​

要设置形状的类型，请在准备要加载到图表中的相关 JSON 结构时，使用形状对象中的 type 属性：

const data = [
    { "id": 1, "x": 280, "y": 0, "text": "Start", "type": "start" },
    { "id": 2, "x": 280, "y": 120, "text": "Read N", "type": "output" },
    { "id": 3, "x": 280, "y": 240, "text": "M=1\nF=2", "type": "process" },
    { "id": 4, "x": 280, "y": 360, "text": "F=F*M", "type": "process" },
    { "id": 5, "x": 280, "y": 480, "text": "Is M=N?", "type": "decision" }
];
备注

请参阅形状对象的完整配置属性列表。在为基本集合中的形状创建数据对象时，请勿添加自定义属性。如需添加自定义属性，您需要创建自定义形状。

设置默认形状类型​

您还可以通过图表配置对象的 defaultShapeType 属性为所有形状设置默认类型：

const diagram = new dhx.Diagram("diagram_container", {
    type: "default", // type: "org" | type: "mindmap" | type: "pert"
    defaultShapeType: "rectangle"
});
diagram.data.parse(data);

如果形状的配置对象不包含 type 属性，则将应用此默认值。

Need more help?Contact Support