Перейти к основному содержимому

Настройка элементов

Вы можете изменять внешний вид элементов диаграммы с помощью различных конфигурационных свойств внутри их объектов. Вы также можете изменить внешний вид диаграммы, создавая пользовательские фигуры.

Стилизация фигур и линий с помощью конфигурационных свойств​

Стилизация фигур​

Объект фигуры предоставляет широкий набор свойств, которые можно использовать для изменения внешнего вида фигур.

Хороший способ оформить все фигуры одного типа сразу — задать настройки стилизации для фигур через свойство 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" // цвет линии
    }
];

Полный список свойств объекта линии.

Посмотрите пример:

Определение шаблона фигуры​

Вы можете создать индивидуально настроенную диаграмму, добавляя в неё новые типы фигур и определяя для них шаблоны. Для этого используйте метод addShape() объекта диаграммы.

Пример в режиме по умолчанию​

Пример в режиме org chart​

Пример в режиме mindmap​

Пример в режиме PERT​

Стилизация целевых фигур​

При использовании диаграмм в режимах org chart и mindmap в Diagram Editor вы можете задать пользовательский стиль для целевых элементов.

Примечание

Стилизация не применяется к родителю перемещаемого элемента, а также к перемещаемому элементу, у которого установлено giveItem: false

<style>
    .dhx_diagram_item.dhx_action__target--take {
        // стили для целевого элемента, который может захватить другой элемент
    }
    .dhx_diagram_item.dhx_action__target--doesnt_take {
        // стили для целевого элемента, который не может захватить другой элемент
    }
</style>

Стилизация групп с помощью конфигурационных свойств​

Стилизация группы​

Чтобы задать пользовательский стиль для группы, используйте свойство style объекта группы. Например:

Стилизация заголовка группы​

Вы можете изменить стиль заголовка группы по умолчанию с помощью атрибутов свойства header объекта группы.

Стилизация дорожек с помощью конфигурационных свойств​

Стилизация дорожки​

Вы можете настроить параметры strokeWidth, stroke и fill дорожки с помощью свойства style объекта дорожки:

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"
                }
            ]
        }
    }
];

Посмотрите полный пример:

Стилизация ячеек дорожки​

Если вам нужно настроить отдельную ячейку дорожки, используйте свойство style объекта ячейки дорожки (type:"$sgroup").

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. Стандартный режим. Шаблон диаграммы Waterfall

Need more help?Contact Support