dhtmlx-gantt vue添加时间基础线

要在dhtmlx-gantt vue中添加时间基础线，您可以使用gantt.config.grid_time_range配置项。

该配置项允许您定义一个对象数组，其中包含基础线的开始和结束时间。每个对象必须具有以下属性：

- start_date：基础线的开始时间。
- end_date：基础线的结束时间。
- css：基础线的CSS类。

例如，以下代码将在gantt vue中添加两条基础线，分别从2021年5月1日到2021年5月7日和从2021年5月15日到2021年5月21日：

<gantt :tasks="tasks" :config="config"></gantt>

// Vue组件中的config对象
{
  grid_time_range: [
    {
      start_date: new Date(2021, 4, 1), // 月份从0开始计算，所以4代表5月份
      end_date: new Date(2021, 4, 7),
      css: "weekend"
    },
    {
      start_date: new Date(2021, 4, 15),
      end_date: new Date(2021, 4, 21),
      css: "weekend"
    }
  ]
}

CSS类“weekend”将应用于这两条基础线，您可以自定义CSS来更改基础线的样式。

相关问题

dhtmlx-gantt vue3

dhtmlx-Gantt是一个功能强大的JavaScript Gantt图库，可用于创建交互式的Gantt图和项目计划表。在Vue 3项目中使用dhtmlx-Gantt，您需要遵循以下步骤：

1. 在Vue项目中安装dhtmlx-Gantt库。您可以在Vue项目的根目录中运行以下命令来安装dhtmlx-Gantt：

npm install dhtmlx-gantt -S

2. 在Vue项目中引入dhtmlx-Gantt库。您可以在Vue项目的main.js文件中引入dhtmlx-Gantt样式和脚本：

import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.js';

3. 在Vue项目中创建一个Gantt组件。您可以在Vue项目中创建一个Gantt组件，并在该组件中使用dhtmlx-Gantt库的API来配置和呈现Gantt图。以下是一个简单的Gantt组件示例：

<template>
  <div ref="gantt"></div>
</template>

<script>
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.js';

export default {
  name: 'Gantt',
  mounted() {
    gantt.init(this.$refs.gantt);
    gantt.parse({
      data: [
        {id: 1, text: 'Task #1', start_date: '2022-01-01', duration: 5},
        {id: 2, text: 'Task #2', start_date: '2022-01-06', duration: 3},
        {id: 3, text: 'Task #3', start_date: '2022-01-09', duration: 6}
      ]
    });
  }
};
</script>

在上面的示例中，我们在mounted钩子函数中初始化了Gantt图，并使用gantt.parse方法将数据传递给Gantt图。

dhtmlx-gantt vue添加实际实际和计划时间

要在dhtmlx-gantt vue中添加实际时间和计划时间，您需要在任务对象中添加两个额外的属性来存储这些信息。以下是一个示例任务对象：

{
  id: 1,
  text: "Task 1",
  start_date: "2021-01-01",
  end_date: "2021-01-05",
  progress: 0.5,
  actual_start_date: "2021-01-02",
  actual_end_date: "2021-01-04"
}

在上面的示例中，我们添加了两个新属性：`actual_start_date`和`actual_end_date`，它们分别存储实际开始日期和实际结束日期。您可以使用类似的方式添加计划时间的属性。

一旦您添加了这些属性，您需要更新gantt图表的配置以显示它们。您可以使用`gantt.config.columns`属性来定义gantt图表中的列。以下是一个示例配置：

gantt.config.columns = [
  {name: "text", label: "Task name", tree: true, width: "*"},
  {name: "start_date", label: "Start date", align: "center", width: "100"},
  {name: "end_date", label: "End date", align: "center", width: "100"},
  {name: "actual_start_date", label: "Actual start date", align: "center", width: "100"},
  {name: "actual_end_date", label: "Actual end date", align: "center", width: "100"},
  {name: "add", label: "", width: "44"}
];

在上面的示例中，我们添加了两列来显示实际开始日期和实际结束日期。最后，您需要在任务对象中更新实际时间和计划时间，并重新绘制gantt图表以查看更新后的数据。