Базовые наборы фигур

Библиотека DHTMLX Diagram предоставляет наборы фигур, которые можно использовать для построения диаграммы. Каждый режим Diagram: по умолчанию, организационная диаграмма, ментальная карта и PERT имеет базовый набор типов фигур.

Подсказка

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

См. полный список свойств конфигурации объекта фигуры.

Фигуры в режиме по умолчанию

В режиме default Diagram базовый набор включает фигуры блок-схемы. Ознакомьтесь с доступными типами фигур блок-схемы:

Также есть элемент "text", представляющий собой простой текст, который можно использовать в диаграмме как фигуру и соединять с другими фигурами.

Связанный пример: Редактор диаграмм. Режим по умолчанию. Широкая блок-схема

Примечание

Вы можете группировать фигуры Diagram в режиме по умолчанию. Ознакомьтесь с соответствующим руководством.

Свойства

Ознакомьтесь со свойствами конфигурации, специфичными для фигур в режиме default Diagram и для фигур блок-схемы и элемента "text".

Фигуры в режиме организационной диаграммы

В режиме организационной диаграммы Diagram базовый набор включает два типа фигур: "card" и "img-card".

Каждая фигура типа "card" имеет текст и цветную полосу заголовка. Фигуры, находящиеся на одном уровне, имеют заголовки одинакового цвета. Примеры фигур "card" показаны на диаграмме типа "организационная диаграмма" ниже:

Связанный пример: Диаграмма. Режим организационной диаграммы. Базовая инициализация

Тип "img-card" можно использовать для добавления фигур с изображениями. Не забудьте указать изображения для карточек через атрибут img объекта фигуры. Следующая организационная диаграмма построена с использованием фигур типа "img-card":

Связанный пример: Редактор диаграмм. Режим организационной диаграммы. Базовая инициализация

Свойства

Ознакомьтесь со свойствами конфигурации, специфичными для фигур в режиме организационной диаграммы Diagram, фигур "card" и фигур "img-card".

Фигуры в режиме ментальной карты

В режиме mindmap Diagram базовым является тип фигур "topic". Каждая фигура имеет текст и цветную рамку. Цвет контура зависит от уровня, к которому относится фигура. Примеры фигур "topic" показаны на следующей диаграмме типа "ментальная карта":

Связанный пример: Диаграмма. Режим ментальной карты. Базовая инициализация

Свойства

Ознакомьтесь со свойствами конфигурации, специфичными для фигур в режиме mindmap Diagram и для фигур "topic".

Фигуры в режиме PERT

Базовые типы фигур в режиме PERT Diagram:

• тип "task" - фигура, имеющая заголовок и отображающая даты и продолжительность:

• тип "milestone" - фигура без продолжительности, обозначающая ключевую точку проекта:

• тип "project" - контейнер, используемый для группировки фигур типов "task" и "milestone":

Связанный пример: Диаграмма. PERT-диаграмма. Инициализация

Свойства

Ознакомьтесь со свойствами конфигурации, специфичными для фигур "task", фигур "milestone" и для группы "project".

Установка типа фигуры

Чтобы установить тип фигуры, используйте свойство type внутри объекта фигуры при подготовке соответствующей JSON-структуры для загрузки в диаграмму:

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.