跳到主要内容

自定义元素

您可以通过在对象内部使用各种配置属性来修改 Diagram 元素的外观。您还可以通过创建自定义形状来更改 Diagram 的外观和风格。

通过配置属性设置形状和线条的样式​

设置形状样式​

形状对象提供了丰富的属性，您可以使用这些属性修改形状的外观和风格。

一次性设置同一类型所有形状样式的好方法是通过 Diagram 的 defaults 属性为形状指定样式设置：

const defaults = {
  start: {
    fill: "#FE9998",
    stroke: "#FE9998",
    fontColor: "#FFF",
    lineHeight: 16
  },
  end: {
    fill: "#FE9998",
    stroke: "#FE9998",
    fontColor: "#FFF",
    lineHeight: 16
  },
  // ...
};

查看形状对象属性的完整列表。

设置线条样式​

要更改连接线的外观，请在线条对象内部使用所需的配置属性。

const data = [
    {
      id: "1-2",
      from: "1",
      to: "2",
      type: "line",
      strokeType: "dash", // 虚线
      stroke: "#fa55d1" // 线条颜色
    }
];

查看线条对象属性的完整列表。

查看示例：

定义形状的模板​

您可以通过向 Diagram 中添加新类型的形状并为其定义模板来创建自定义 Diagram。为此，请使用 Diagram 对象的 addShape() 方法。

默认模式下的示例​

组织结构图模式下的示例​

思维导图模式下的示例​

PERT 模式下的示例​

设置目标形状的样式​

在 Diagram Editor 中使用组织结构图和思维导图时，您可以为目标元素添加自定义样式。

备注

样式设置不适用于被移动元素的父级，也不适用于设置了 giveItem: false 的被移动元素

<style>
    .dhx_diagram_item.dhx_action__target--take {
        // 可以捕获其他元素的目标元素的样式
    }
    .dhx_diagram_item.dhx_action__target--doesnt_take {
        // 无法捕获其他元素的目标元素的样式
    }
</style>

通过配置属性设置组的样式​

设置组的样式​

要为组指定自定义样式，您可以使用组对象的 style 属性。例如：

设置组标题的样式​

您可以通过组对象的 header 属性的相关属性来更改组标题的默认样式。

通过配置属性设置泳道的样式​

设置泳道的样式​

您可以通过泳道对象的 style 属性自定义泳道的 strokeWidth、stroke 和 fill 设置：

const data = [
    {
        "type": "$swimlane",
        "width": 970,
        "height": 790,
        "header": {
            "text": "Game levels and locations",
            "closable": true
        },
        "layout": [
            ["1"],
            ["2"],
            ["3"],
            ["4"],
            ["5"]
        ],
        "style": {
            "strokeWidth": 5,
            "stroke": "#083796",
            "fill": "#D4DAE4"
        }
    }
];

设置泳道标题/子标题的样式​

泳道对象的 header、subHeaderRows 和 subHeaderCols 属性包含一组额外的属性，用于自定义泳道的标题和子标题。

例如，您可以通过 subHeaderCols 属性更改泳道顶部子标题的背景颜色：

const data = [
    {
        "id": "main",
        "type": "$swimlane",
        "height": 730,
        "width": 1195,
        "header": {
            "closable": true,
            "text": "Waterfall diagram template"
         },
        "layout": [
            [1, 2, 3, 4]
        ],
        "subHeaderCols": {
            "headers": [
                {
                    "text": "September",
                    "fill": "#f35c4f66"
                },
                {
                    "text": "October",
                    "fill": "#9b60f866"
                },
                {
                    "text": "November",
                    "fill": "#ffae1266"
                },
                {
                    "text": "December",
                    "fill": "#3cc97a66"
                }
            ]
        }
    }
];

查看完整示例：

设置泳道单元格的样式​

如果需要自定义泳道中的单个单元格，请使用泳道单元格对象（type:"$sgroup"）的 style 属性。

const data = [
    {
        "id": "main",
        "type": "$swimlane",
        "height": 730,
        "width": 1195,
        "layout": [
            [1, 2, 3, 4]
        ],
        // ...
    },
    {
        "id": 1,
        "type": "$sgroup",
        "style": {
            "fill": "#D4DAE4"
        },
        "x": 0,
        "y": 80
    }
];

相关示例： Diagram。默认模式。瀑布 Diagram 模板

Need more help?Contact Support