Инициализация Diagram на странице

После установки виджета Diagram, вы можете инициализировать его на своей странице и настроить необходимые конфигурации.

Инициализация

Минимальные настройки для начала работы с Diagram выглядят следующим образом:

webix.ui({
  view:"diagram",
  data:[
    { id:"1", value:"Managing Director" },
    { id:"1.1", value:"Base Manager" },
    { id:"1.1.1", value:"Store Manager" },
    //другие блоки
  ], 
  links:[
    { source:"1", target:"1.1" },
    { source:"1.1", target:"1.1.1" },
    // другие коннекторы
  ],
  // ...
});

Related sample:  Diagram: Basic

Свойство data хранит плоский массив данных о блоках, которые будут отображаться на диаграмме. В тоже время, массив links хранит коннекторы (линии которые соединяют блоки).

Виджет Diagram может работать с данными в форматах JSON и XML. Следует отметить, что если входящие данные находятся в формате XML, вам нужно задать свойство datatype в значении "xml":

webix.ui({
  view:"diagram",
  datatype:"xml",   data:"remote/data.xml", 
  links:"remote/links.xml",
  // ...
});

Основные настройки

Ниже вы можете увидеть список свойств для настройки виджета Diagram:

• url (string) - URL адрес, по которому загружаются данные для блоков
• data (string, array) - массив данных для блоков диаграммы или XML строка
• links (string, array, object) - URL адрес для загрузки данных о коннекторах или сам массив данных о коннекторах, или DataCollection
• shapes (array) - массив данных с настройками для форм
• autoplace (boolean) - активирует авторасстановку блоков. Значение true установлено по умолчанию
• root (string, number) - ID корневого элемента, с которого начинается ветвление при авторасстановке блоков
• item (object) - объект с общими настройками для всех блоков
• linkItem (object) - объект с общими настройками для всех коннекторов
• treePadding (number) - определяет отступы между отдельными деревьями диаграммы, если они есть
• padding (number) - определяет внутренний отступ по периметру виджета. Значение 20px установлено по умолчанию.

С полным списком свойств для настройки Diagram можно ознакомиться в его API документации.

Настройка блоков

Настройки блоков диаграммы определяются в массиве свойства data или загружаются из удаленного источника, путь к которому указан в свойстве url. Каждый блок представляет собой объект со следующими полями:

• width (number) - ширина блока
• height (number) - высота блока
• x (number) - задает горизонтальную позицию блока. Применяется, если свойство autoplacement установлено в значении false
• y (number) - задает вертикальную позицию блока. Применяется, если свойство autoplacement установлено в значении false
• template (string, function) - задает шаблон для содержимого блока
• type (string) - задает тип формы блока
• css (string, function) - название CSS класса или функция-темплейт, которая возвращает название класса для блоков.

Вы можете настроить каждый блок индивидуально (например, внутри массива свойства data) или указать общие настройки для всех блоков через свойство **item*:

webix.ui({
  view:"diagram",
  links:[/* настройки коннекторов между блоками */],
  item:{           
    width:70,     
    height:30,
    // общие настройки для всех блоков
    type:"action",
    css:"myCss"
  } 
});

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

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

Наверх