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

Свойства фигур

Примечание

Указывайте значения цвета в формате HEX.

Общие свойства​

Использование​

const data = [
    // объект фигуры
    {
        type: string,
        id?: string | number,
        x?: number, // обязательно в режиме Diagram по умолчанию
        y?: number, // обязательно в режиме Diagram по умолчанию
        text?: string,
        editable?: boolean, // true по умолчанию
        height?: number,
        width?: number,
        fixed?: boolean, // false по умолчанию
        hidden?: boolean
    },
    // другие объекты фигур
]

Описание​

Каждый объект фигуры может включать следующие свойства:

  • type - (обязательно) тип фигуры (по умолчанию: "rectangle" в режиме по умолчанию, "card" в режиме организационной диаграммы, "topic" в режиме ментальной карты, "task" в режиме PERT)
  • id - (опционально) уникальный id фигуры
  • x - (опционально) координата x позиции фигуры. Свойство является обязательным в режиме Diagram по умолчанию
  • y - (опционально) координата y позиции фигуры. Свойство является обязательным в режиме Diagram по умолчанию
  • text - (опционально) текст, отображаемый в фигуре
  • editable - (опционально) включает/отключает возможность редактирования текста фигуры двойным щелчком по ней; по умолчанию true.
    Свойство недоступно для пользовательской фигуры.
  • height - (опционально) высота фигуры
  • width - (опционально) ширина фигуры
  • fixed - (опционально) включает/отключает перемещение и изменение размера фигуры, по умолчанию false
  • hidden - (опционально) определяет, будет ли фигура скрыта
Примечание

Значения height и width рассчитываются автоматически для фигуры "text"/"topic" в зависимости от содержимого фигуры.

Пользовательские свойства​

Использование​

const data = [
    // объект фигуры
    {
        // ... общие свойства
        [key: string]?: any, // пользовательское свойство
        // ... другие пользовательские свойства
    },
    // другие объекты фигур
]

Описание​

При подготовке набора данных для пользовательской фигуры вы можете добавить любые пользовательские свойства в объект конфигурации фигуры:

  • key - (опционально) пользовательское свойство для пользовательской фигуры. Подробности см. в статье Пользовательская фигура.
    Используйте уникальные имена для пользовательских свойств. Переопределение внутренних свойств объекта фигуры диаграммы запрещено, так как это приводит к некорректной работе диаграммы и её редактора.

Пример​

const data = [
    {
        "id": "main",
        "name": "Kristin Mccoy",
        "post": "Medical director",
        "phone": "(405) 555-0128",
        "mail": "kmccoy@gmail.com",
        "photo": "../img/avatar-01.jpg"
    }
];

Свойства, специфичные для режима по умолчанию​

Использование​

const data = [
    // объект фигуры
    {
        // ... общие свойства
        angle?: number,

        //либо
        preview?: string,
        // или
        preview?: {
            img?: string,
            width?: number | string,
            height?: number | string,
            gap?: number | string,
            scale?: number
        }
    },
    // другие объекты фигур
]

Описание​

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

  • angle - (опционально) угол поворота фигуры
  • preview - (опционально) путь к изображению/base64-изображение либо объект с настройками для конфигурации превью фигуры, отображаемого на панели фигур редактора. В виде объекта свойство может содержать набор опциональных свойств:
    • img - (опционально) путь к изображению или base64-изображение
    • width - (опционально) ширина изображения
    • height - (опционально) высота изображения
    • gap - (опционально) задаёт значение атрибута gap свойства preview для указанного типа фигуры
    • scale - (опционально) задаёт значение атрибута scale свойства preview для указанного типа фигуры
    К сведению

    Свойство scale нельзя применять вместе со свойствами img, width, height

Пример​

const data = [
    { id: 1, x: 280, y: 0, text: "Start", type: "start", angle: 10 }
];

Свойства, специфичные для режима организационной диаграммы​

Использование​

const data = [
    // объект фигуры
    {
        // ... общие свойства
        parent?: string | number,
        dx?: number,
        dy?: number,
        dir?: string,
        open?: boolean, // true по умолчанию
        assistant?: boolean,
        partner?: boolean,
        catchItem?: boolean,
        giveItem?: boolean

    },
    // другие объекты фигур
]

Описание​

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

  • parent - (опционально) id родительской фигуры
  • dx - (опционально) смещение фигуры слева
  • dy - (опционально) смещение фигуры сверху
  • dir - (опционально) направление соединения фигур. Чтобы соединить фигуры вертикально, установите атрибуту значение "vertical"
  • open - (опционально) определяет, будут ли показаны дочерние элементы текущей фигуры; по умолчанию true
  • assistant - (опционально) определяет, является ли фигура элементом-ассистентом для родительской фигуры
  • partner - (опционально) определяет, является ли фигура элементом-партнёром для родительской фигуры
  • catchItem - (опционально) определяет, может ли элемент захватывать перемещаемый элемент
  • giveItem - (опционально) определяет, может ли элемент быть перемещён

Пример​

const data = [
    {
        "id": "1",
        "text": "item 1",
    },
    {
        "id": "2",
        "text": "item 2",
        "parent": "1",
        "dir": "vertical"
    },
    {
        "id": "1.1",
        "text": "assistant for 1",
        "parent": "1",
        "assistant": true
    },
    {
        "id": "1.2",
        "text": "partner for 1",
        "parent": "1",
        "partner": true
    }
];

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

Свойства, специфичные для режима ментальной карты​

Использование​

const data = [
    // объект фигуры
    {
        // ... общие свойства
        parent?: string | number,
        dx?: number,
        dy?: number,
        open?: boolean, // true по умолчанию
        openDir?:{
            left?: boolean,
            right?: boolean
        },
        catchItem?: boolean,
        giveItem?: boolean
    },
    // другие объекты фигур
]

Описание​

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

  • parent - (опционально) id родительской фигуры
  • dx - (опционально) смещение фигуры слева
  • dy - (опционально) смещение фигуры сверху
  • open - (опционально) определяет, будут ли показаны дочерние элементы текущей фигуры; по умолчанию true
  • openDir - (опционально) показывает/скрывает дочерние элементы корневой фигуры. Объект принимает два атрибута:
    • left - (опционально) показывает/скрывает дочерние элементы слева от корневой фигуры
    • right - (опционально) показывает/скрывает дочерние элементы справа от корневой фигуры
  • catchItem - (опционально) определяет, может ли элемент захватывать перемещаемый элемент
  • giveItem - (опционально) определяет, может ли элемент быть перемещён

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

К сведению

Подробности читайте в статье Как создать диаграмму типа "ментальная карта" на JavaScript с помощью библиотеки DHTMLX

Пример​

const data = [
    {
        id: "1",
        text: "main",
        openDir: {
            left: true,
            right: false
        }
    },
    {
        id: "2",
        text: "2",
        parent: "1",
        giveItem: false
    },
    {
        id: "3",
        text: "3",
        parent: "1",
        catchItem: false
    },
    {
        id: "4",
        text: "4",
        parent: "1"
    }
];

Свойства, специфичные для фигур "text", "topic" и фигур блок-схемы​

Использование​

const data = [
    // объект фигуры
    {
        // ... общие свойства
        fill?: string,
        stroke?: string,
        strokeWidth?: number, // 1 по умолчанию
        strokeType?: "line" | "dash", // "line" по умолчанию
        strokeDash?: string,
        fontColor?: string,
        fontStyle?: "normal" | "italic" | "oblique", // "normal" по умолчанию
        fontWeight?: string, // "normal" по умолчанию
        fontSize?: number, // 14 по умолчанию
        textAlign?: "left" | "center" | "right", // "center" по умолчанию
        textVerticalAlign?: "top" | "center" | "bottom", // "center" по умолчанию
        lineHeight?: number // 14 по умолчанию
    },
    // другие объекты фигур
]

Описание​

При подготовке набора данных для фигур "text", "topic" и фигур блок-схемы вы можете добавить следующие свойства в объект конфигурации фигуры:

  • fill - (опционально) цвет фигуры
  • stroke - (опционально) цвет контура фигуры
  • strokeWidth - (опционально) толщина контура фигуры, по умолчанию 1
  • strokeType - (опционально) тип контура: "line" (по умолчанию), "dash" для пунктирной линии
  • strokeDash - (опционально) шаблон штрихов и пробелов для пунктирного контура
  • fontColor - (опционально) цвет шрифта текста
  • fontStyle - (опционально) стиль шрифта текста: "normal" (по умолчанию), "italic" или "oblique"
  • fontWeight - (опционально) насыщенность шрифта текста, возможные значения: "normal" (по умолчанию), "bold", "bolder", "lighter", значения от "100" до "900", где "400" соответствует normal, а "600" и выше — самый жирный шрифт
  • fontSize - (опционально) размер шрифта в пикселях, по умолчанию 14
  • textAlign - (опционально) выравнивание текста в фигуре: "left", "center" (по умолчанию), "right"
  • textVerticalAlign - (опционально) вертикальное выравнивание текста в фигуре: "top", "center" (по умолчанию), "bottom"
  • lineHeight - (опционально) высота строки, по умолчанию 14

Пример​

const data = [
    {
        "id": "u1585139915192",
        "type": "text",
        "x": 25,
        "y": 280,
        "text": "Investment decision",
        "width": 150,
        "height": 16,
        "lineHeight": 14,
        "fontSize": "16",
        "fontColor": "rgba(0,0,0,0.70)"
    }
];

Свойства, специфичные для фигур "card"​

Использование​

const data = [
    // объект фигуры
    {
        // ... общие свойства
        headerColor?: string
    },
    // другие объекты фигур
]

Описание​

При подготовке набора данных для фигур "card" вы можете добавить следующие свойства в объект конфигурации фигуры:

  • headerColor - (опционально) цвет заголовка фигуры

Пример​

const data = [
    {
        "id": 1,
        "type": "card",
        "text": "item: 1",
    },
    {
        "id": 2,
        "type": "card",
        "text": "item: 2",
        "parent": 1,
        "headerColor": "#5874CD"
    },
];

Свойства, специфичные для фигур "img-card"​

Использование​

const data = [
    // объект фигуры
    {
        // ... общие свойства
        img?: string,
        title?: string,
        headerColor?: string
    },
    // другие объекты фигур
]

Описание​

При подготовке набора данных для фигур "img-card" вы можете добавить следующие свойства в объект конфигурации фигуры:

  • img - (опционально) изображение фигуры
  • title - (опционально) заголовок фигуры
  • headerColor - (опционально) цвет заголовка фигуры

Пример​

const data = [
    {
        "id": "1",
        "type": "img-card",
        "text": "Chairman & CEO",
        "title": "Henry Bennett",
        "img": "../img/avatar-01.png",
        "headerColor": ""
    },
    {
        "id": "2",
        "type": "img-card",
        "text": "QA Lead",
        "title": "Emma Lynch",
        "img": "../img/avatar-02.png",
        "parent": "1",
        "headerColor": "#5874CD"
    }
];

Свойства, специфичные для фигур "task"​

Использование​

const data = [
    // объект фигуры
    {
        type: "task",
        duration: number,
        start_date: string | Date,
        end_date?: string | Date,
        text?: string,
        parent?: string | number | null
        //... общие свойства
    },
    // другие объекты фигур
]

Описание​

При подготовке набора данных для фигур "task" вы можете добавить следующие свойства в объект конфигурации фигуры:

  • text - (опционально) описание задачи
  • start_date - (обязательно) дата начала задачи
  • end_date - (опционально) дата окончания задачи
  • duration - (обязательно) продолжительность задачи
  • parent - (опционально) id родительского проекта задачи

Пример​

const data = [
    {
        "id": "4.2.1",
        "text": "Functional Testing",
        "type": "task",
        "parent": "4.2",
        "start_date": new Date(2026, 1, 18),
        "duration": 2
    }
];

Свойства, специфичные для фигур "milestone"​

Использование​

const data = [
    // объект фигуры
    {
        type: "milestone",
        text?: string,
        parent?: string | number | null
        //... общие свойства
    }
    // другие объекты фигур
]

Описание​

При подготовке набора данных для фигур "milestone" вы можете добавить следующие свойства в объект конфигурации фигуры:

  • text - (опционально) описание задачи
  • parent - (опционально) id родительского проекта задачи

Пример​

const data = [
     {
        "id": "5.2",
        "text": "Product Launch",
        "type": "milestone",
        "parent": "5",
        "start_date": new Date(2026, 2, 1),
        "duration": 1
    }
];

Полезные статьи:

Need more help?Contact Support