• 甘特图组件DHTMLX Gantt用例 - 如何自定义任务、月标记和网格新外观

    dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。

    本文将为大家揭示DHTMLX Gantt自定义的典型用例，包括自定义任务、网格的新外观等，来展示其功能的强大性！

    DHTMLX Gantt正式版下载

    用例 - 新建项目外观、当前月份标记和可折叠网格

    DHTMLX Gantt的默认视图显示写在条形内的项目和任务名称中，项目栏通常具有矩形形状，就像任务栏一样，并且在颜色上与任务不同。然而这并不是在DHTMLX Gantt中显示项目和任务的唯一方法，我们的甘特图库在定制方面非常灵活，并允许多种方式可视化数据。

    甘特图组件DHTMLX Gantt用例 - 如何自定义任务、月标记和网格新外观

    在这里您可以看到项目用彩色且细的线条和标签很好地描述在顶部，项目日期和持续时间标记在项目名称旁边。因此，最终用户可以很快地掌握每个项目将花费多少时间。

    任务标签也位于任务栏的右侧，当前月份在时间标度上清晰地突出显示，以免在时间轴上丢失。此外，还有一个切换按钮，用于折叠网格部分，以便为甘特图腾出更多空间。

    这样的自定义有助于工作流的透明性，对于中小型项目尤其有用。它还使您的甘特图更加用户友好，更容易管理，在视图与扩展的网格部分和全屏图表之间切换。

    自定义指南

    让我们深入研究一下DHTMLX制作的甘特图。

    当前月份标记

    我们从甘特图时间轴中使用的时间尺度和垂直标记开始，scales的配置通过scales属性指定：

    1. gantt.config.scales = [
    2. {
    3. unit: "quarter", step: 1, format: function (date) {
    4. const quarter = (date.getMonth() % 3) + 1;
    5. const year = date.getFullYear();
    6. return `Q${quarter} ${year}`;
    7. }
    8. },
    9. {
    10. unit: "month", step: 1, format: function (date) {
    11. const monthName = gantt.date.date_to_str("%F")(date)
    12. const nextDate = gantt.date.add(date, 1, "month");
    13. if (+date <= +today && +today <= +nextDate) {
    14. return `
      ${monthName}
      `      ;
    15. }
    16. else {
    17. return monthName;
    18. }
    19. }
    20. },
    21. ]

    在scales配置的数组中，我们指定了两种内置的scale类型，“quarter”和“month”。在这两种比例类型的单元格中，可以显示任何值或HTML元素，但它们不会改变单元格的宽度。例如，较低刻度中的一个单元格包含一个自定义元素，该元素带有一个特定的类，用于用CSS样式为该单元格着色。该元素突出显示当前月份，在today参数中指定：

    1. const today = new Date(2023, 05, 18)
    2. const todayMarker = gantt.addMarker({
    3. start_date: today,
    4. css: "today",
    5. });

    addMarker()方法中还使用today参数来添加一个突出显示当前月份的垂直标记。在标记配置中，我们指定用于设置标记日期的Date对象和用于添加标记颜色的CSS类。由于没有在addMarker()方法中应用text参数，因此标记将显示为一条简单的线。

    任务行为

    有必要对与甘特图时间轴上的任务交互多说几句，最终用户可以沿着时间轴将给定的任务移动到任何特定的点，它不会捕捉到任何单元格的开始或结束。为了实现这一点，我们在甘特图中将round_dnd_dates参数的值更改为false。配置对象：

    gantt.config.round_dnd_dates = false;

    根据这个演示项目的需求，我们还添加了移动项目任务的功能，并禁用了任务之间的依赖关系(链接)和任务进度的显示：

    1. gantt.config.drag_project = true;
    2. gantt.config.drag_progress = false;
    3. gantt.config.drag_links = false;
    网格

    在甘特图的网格部分，有两列。第一列包含任务的名称，第二列提供任务的时间框架。使用模板函数，您可以在网格列的单元格中添加任何文本或HTML元素：

    1. gantt.config.columns = [
    2. { name: "text", label: " ", width: 300, tree: true },
    3. {
    4. name: "dates", label: getToggleButton(), align: "center", template: function (task) {
    5. if (task.type == "project") {
    6. return ""
    7. }
    8.  
    9. return taskDatesFormat(task)
    10. }
    11. },
    12. ];

    现在我们要关注taskDatesFormat函数，它从任务对象返回所需的字符串：

    1. function taskDatesFormat(task) {
    2. let startMonth = gantt.date.date_to_str("%M");
    3. let endMonth = startMonth;
    4. let day = gantt.date.date_to_str("%j");
    5.  
    6. if (task.start_date.getMonth() == task.end_date.getMonth()) {
    7. endMonth = gantt.date.date_to_str("");
    8. }
    9. const start_date = `${startMonth(task.start_date)} ${day(task.start_date)} - `;
    10. const end_date = `${endMonth(task.end_date)} ${day(task.end_date)}`;
    11. return start_date + end_date;
    12.  
    13. }

    这个函数的工作原理如下：

    • 它将任务开始日期转换为字符串，从而只显示月份的名称。
    • 如果一个任务在同一个月开始和结束，那么这个月的名称将只在开始日期之前显示。如果开始日期和结束日期属于不同的月份，则开始月份显示在开始日期之前，结束月份显示在结束日期之前。
    • 日期跟在月份的名称后面。

    有一个特殊的切换按钮，允许折叠和展开网格部分。为了添加这个按钮，我们在label参数中指定了getToggleButton()函数。根据网格的当前状态，此函数返回不同的值。当按钮被点击时，我们改变grid_width配置中的返回值和宽度：

    1. function toggleGrid() {
    2. if (gridToggleText == "lt") {
    3. gantt.config.grid_width = 80;
    4. gridToggleText = "gt"
    5. }
    6. else {
    7. gantt.config.grid_width = initialGridWidth;
    8. gridToggleText = "lt"
    9. }
    10. gantt.config.columns[1].label = getToggleButton();
    11. gantt.render();
    12. }

    或者，可以使用调整大小器更改网格大小。min_grid_column_width参数设置每个列的最小宽度，因此不能使网格小于指定的大小。因为我们的甘特图有两列，min_grid_column_width参数的值是30px，所以最小的网格宽度是60px。

    gantt.config.min_grid_column_width = 30;

    网格区域中的彩色圆圈在grid_folder模板中指定：

    1. gantt.templates.grid_folder = function (task) {
    2. return `
      ${task.color}" class="project_icon"> • 
      `      ;
    3. };

    返回的自定义元素包含一个特殊符号“•”，圆圈的颜色和大小由CSS样式指定。

    对于具有子元素的任务，grid_folder模板显示，而对于其他任务，grid_file模板返回空字符串(" ")：

    1. gantt.templates.grid_file = function (item) {
    2. return "";
    3. };

    task_row_class模板在带有子元素的任务下面隐藏了一个边框：

    1. gantt.templates.task_row_class = function (start, end, task) {
    2. if (task.type == "project") {
    3. return "project_row";
    4. }
    5. };
    任务外观

    最后让我们介绍一下如何在甘特图中自定义项目和任务，由于任务栏中不应该有文本，task_text模板返回一个空字符串:

    1. gantt.templates.task_text = function (start, end, task) {
    2. return "";
    3. };

    在rightside_text模板的帮助下，文本标签显示在右侧：

    1. gantt.templates.rightside_text = function (start, end, task) {
    2. if (task.type != "project") {
    3. return task.text;
    4. }
    5. };

    在我们的演示中，rightside_text模板不返回任何项目任务。相反，我们使用addTaskLayer()方法，它允许在甘特图时间轴中显示任何文本或HTML元素。对于项目任务，我们在自定义taskDatesFormat函数的帮助下，以甘特图网格中使用的相同格式返回任务名称、持续时间和日期，这些值用一个特殊的点符号“•”分开，自定义元素的位置是使用getTaskPosition()方法计算的：

    1. gantt.addTaskLayer(function (task) {
    2. if (task.type == "project") {
    3. const sizes = gantt.getTaskPosition(task, task.start_date, task.end_date);
    4. const el = document.createElement('div');
    5. const dot = `•`
    6. el.innerHTML = task.text + dot + taskDatesFormat(task) + dot + task.duration + "days";
    7. el.style.left = sizes.left + 10 + 'px';
    8. el.style.top = sizes.top + 'px';
    9. el.style.zIndex = 1;
    10. el.style.marginTop = "7px";
    11. el.style.position = "absolute";
    12. el.style.lineHeight = "16px";
    13. return el;
    14. }
    15. });

    就是这样！通过这个分步指南，您可以实现相同的结果，并创建一个自定义甘特图，就像我们的用例一样。

  • 相关阅读:
    Vue 3 学习 源码解读
    编译一个基于debian/ubuntu,centos,arhlinux第三方系统
    线程池底层原理详解与源码分析
    第四次作业
    Activity生命周期
    2023年8月嵌入式项目开发专题总汇
    MySQL知识总结 (一) 数据类型
    Linux进程控制(2)
    Qt creator中项目的构建配置和运行设置
    openfeign、nacos获取接口提供方真实IP
  • 原文地址：https://blog.csdn.net/AABBbaby/article/details/134048947