Это также относится к средам Angular, React или Vue.js.

И снова здравствуйте. Сегодня мы покажем, как можно настроить JavaScript-компонент GanttChartView из DlhSoft Gantt Chart Hyper Library для отображения текстовых меток на панелях задач в области диаграммы, а также значков назначения, прикрепленных к каждой панели.

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

Но хватит вступления, давайте перейдем к написанию кода. Мы можем начать, например, с очень простого Образца приложения Grid columns (доступного для загрузки среди множества других живых демонстраций на нашем веб-сайте), и постепенно добавлять поддержку функций, упомянутых выше.

Ярлыки панели задач

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

У каждого элемента диаграммы Ганта (или задачи) может быть определено поле метка помимо его классического содержимого, которое по умолчанию отображается в иерархической сетке. Очевидно, что для него может быть установлено то же значение, что и для последнего, и эта строка будет отображаться на экране над панелью задач с указанными настройками внешнего вида, в зависимости от типа задачи: стандартная, сводная или веха. Вехи будут иметь метку, отображаемую перед их ромбом. Если для элемента не определено поле метки, очевидно, что у него не будет метки столбца:

var items = [
    { content: 'Planning', isExpanded: false },
    { content: 'Requirements', label: 'Requirements', indentation: 1, start: new Date(year, month, 1, 8, 0, 0), finish: new Date(year, month, 4, 16, 0, 0) },
    ...
];

settings.areStandardTaskLabelsVisible = true;
settings.areSummaryTaskLabelsVisible = true;
settings.areMilestoneTaskLabelsVisible = true;

settings.standardLabelClass = 'standardLabelClass';
settings.summaryLabelStyle = 'color: #ffeafd; font-weight: bold;';

items[9].labelColor = '#a36734';

...

var ganttChartView = DlhSoft.Controls.GanttChartView.initialize(ganttChartViewElement, items, settings);

Как вы можете видеть выше, настройки are{Type}TaskLabelsVisible позволяют отображать или скрывать метки для определенных типов задач, а также можно определять классы или стили CSS либо на основе типа задачи, либо напрямую. , как значения поля labelColor для определенных элементов.

Пример кода, описанный выше, также доступен в отдельном конкретном примере приложения, если он вам нужен.

Значки назначения

Но что, если вы хотите представить назначенные ресурсы, такие как Кларисса и Стивен выше, используя изображения, а не текст? Разве это не было бы мило?

Что ж, вот как это можно сделать всего несколькими строками кода:

settings.areResourceImagesVisibleAsAssignments = true;
settings.resourceImageUrls = [
    { key: 'Clarissa Candelaria', value: 'Images/Clarissa.png' },
    { key: 'Steven Rush', value: 'Images/Steven.png' },
    ...
];

...

DlhSoft.Controls.GanttChartView.initialize(ganttChartView, items, settings);

Вот и все: вам нужно убедиться, что вы установили для параметра areResourceImagesVisibleAsAssignments значение true и определили URL-адреса изображений ресурсов в массиве, похожем на словарь, с указанием для каждого ресурса назовите изображение для отображения. Внутренности компонента сделают все остальное за вас!

Этот образец показывает этот код, выделенный в отдельное приложение, если вы предпочитаете протестировать его на своем компьютере прямо сейчас.

Обратите внимание, что, поскольку эти новые поля определены либо в разделе settings, либо в объекте item, и что мы также включили их в наши определения TypeScript, вы можете легко применить их в простой JavaScript, а также если вы используете Angular, React или Vue.js для своего решения.

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

Спасибо за прочтение, увидимся в следующий раз!