xpyjs/gantt

An easy-to-use Gantt component. 持续更新，中文文档

gantt's Issues

关于数据读取错误的原因，尤其是关于 length 的

好像这个 gantt 用的人越来越多了，最近从不同渠道至少有5、6个人问我关于下图的问题。

我在这里做一下统一解答。

这个问题出现的原因是源数据中属性不全。

在我们使用 data 传入数据源时，一定要保证数组中的每一个对象都应当包含 index, startDate, endDate 和 children 这些键，它们会确保正确显示数据内容。

为什么？

它们可以保证：

• 数据的统一性
• 数据的唯一性
• 正确显示展开按钮
• 正确渲染甘特条的位置

这些数据应当算是源数据中的初始数据，也是关键数据，所以一定要保证它们的存在，且正确存在。

更多细节，可以看一下 文档，比较详细。

===

如果还有问题，可以再提 Issue 🙂

[FEATURE]可能会支持头部日期的自定义吗？比如具体的日期加个大促等标识

行高设置的问题

如果动态设置改变了j-gantt组件的row-height属性，无法使得组件改变的行高

使用文档中新版本引入css名称未修改

新版本css名称变为style.css了，使用文档中还是import 'jz-gantt/dist/index.css';

希望可以增加日期表头显示类型配置

目前默认显示为“年日”，这样有时候甘特图会特别长，比如可以配置到显示“年月”，“月日”等

[BUG] 当开始日期和结束日期是同一天的时候，甘特图的slider没有宽度，是不是应该有一格的宽度呀

辛苦了 谢谢了

[BUG] Col列样式异常导致错位

• 当我设置列宽之后，显示时，表格的框线出现异常
  
• SourceCode

 <el-row>
            <x-gantt :header-style="dataList.headStyle"  data-index="index" :data="dataList.plantList">
            <x-gantt-column label="index" name="序号">
                <template v-slot="item">
                    <span >{{item.data.index}}</span>
                </template>
            </x-gantt-column>
            <x-gantt-column label="plantName" width="120" name="名称"></x-gantt-column>
            <x-gantt-column label="displayStartDate" width="140" name="计划开始时间">

            </x-gantt-column>
            <x-gantt-column label="displayEndDate" width="140" name="计划结束时间">


            </x-gantt-column>
            <x-gantt-slider highlightDate="true">
                <template v-slot:content="{ data, level }">
                    <div class="progressBgColor">
                        <el-tooltip content="data.name">
                            <el-progress color="#f8e3c5" :text-inside="true" :stroke-width="24" :percentage="data.progress">
                                <span></span>
                            </el-progress>
                        </el-tooltip>
                    </div>

                </template>
            </x-gantt-slider>
        </x-gantt>
        </el-row>

• 尝试看了下问题，发现在[#6 ]中有一个朋友提出了计算行的宽度使用 calc(var(--column-width) - 4px);,若我使用 calc(var(--column-width) );则稍微正常一些

[BUG] new data 还未请求回来时 newData length 不存在 导致页面没刷新

[BUG]成功条位置异常

Describe the bug
当滚动区域 top 不为 0 时，成功条位置异常

To Reproduce
Steps to reproduce the behavior:

1. 滚动一下 gantt 区域，使 scrollTop 不为 0
2. 拖拽 slider，成功时显示的成功条，位置差异随滚动距离越来越大

Expected behavior
期望位置正常

Screenshots

Versions

• Version v1.1.12
• Browser all

Additional context
无

支持前置任务功能么

一个样式小bug以及优化样式配置的建议

目前可以配置header-style与body-style，body-style基本够用，但头部的样式只能配置背景色与文字颜色，如果想设置padding等，只能覆盖，建议提供header-class，直接可配置所需的样式。
同样的，对于表格左侧内容，要设置样式只能通过插槽，重写样式都行不通，因为表格内容的box-sizing不是border-box，如果设置padding之类，就会导致宽度不对，希望可以改进。
表格内容行样式有个小bug，.gt-column .gt-column__chunk的line-height为height，应该为calc(var(--row-height) - 4px)

下图是我调整的样式，总的来说，有一丢丢麻烦：

会考虑显示颗粒最小到秒吗？

用于时长比较短的计划，例如做一个实验的计划，总时长可能就几个小时甚至更短，目前能显示颗粒到秒的甘特图非常少。

我可不可以直接在甘特图上直接拖动创建一个时间范围

          还想问一个问题，我可不可以直接在甘特图上直接拖动创建一个时间范围。目前好像必须要求有开始和结束时间才显示滑块，

我某些情况下没开始和结束时间，想直接拖动创建一个出来

类似这个效果

Originally posted by @iarthit in #34 (comment)

[FEATURE] XGanttColumn 的 label 希望支援插槽

可能有场景需要在 label 添加一些按钮之类。现在的 label 只能是文本。希望把 label 开放出来可自定义的插槽。

拖拽排序

能否支持上下拖拽排序？

甘特图中一项内容能展示两个不同时间段的数据吗。0.17版本start-key和end-key好像不生效

[FEATURE]

您好，请问能支持同一行多个甘特条的功能不？

数据过多需要滚轮滑动时出现渲染错误

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
当数据过多，滚轮下滑时会出现一堆空数据，请问怎么解决（需要代码我可以发你），还有现在文档看不了了。
Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

[BUG] Cannot read properties of null (reading 'setupContext')

Describe the bug
进入该组件所在页面时即报错 Cannot read properties of null (reading 'setupContext') ，报错代码位置为：https://github.com/xpyjs/gantt/blob/master/src/components/root/RootWrap.vue#L21
dev 模式下触发了 vue 的 warn：useContext() called without active instance.
2.0.0 以上就会触发，1.x 版本正常。

Screenshots

Versions

• Version >2.0.0
• Browser Edge 113.0.1774.50

测试代码

<x-gantt
        data-id="id"
        :data="dataList"
        :ref="ganttRef"
        start-key="planStartTime"
        end-key="planEndTime"
      >
        <x-gantt-column label="标题" prop="name" />
        <x-gantt-column label="进度" prop="progress" />
        <x-gantt-column label="开始日期" prop="planStartTime" />
        <x-gantt-column label="结束日期" prop="planEndTime" />
</x-gantt>

const dataList = ref([
    {
      id: 1660933075125125000,
      name: '小鸡快跑计划',
      projectId: 1,
      ganttDataType: 39,
      planStartTime: '2023-10-04 15:21:27',
      planEndTime: '2023-11-01 20:33:39',
      assign: 'anim Ut veniam elit aliquip',
      progress: 58,
      estimatedHours: 100,
      totalManHour: 84,
      remainingManHour: 93,
      status: 1,
      children: [
        {
          id: 1661169300083720200,
          parentId: 1660933075125125000,
          name: '孵鸡蛋',
          projectId: 1,
          ganttDataType: 2,
          planStartTime: '2023-11-04 15:21:27',
          planEndTime: '2023-12-01 20:33:39',
          assign: '陈小东',
          progress: 58,
          estimatedHours: 100,
          totalManHour: 84,
          remainingManHour: 93,
          status: 1,
        },
    ]
}

您好，甘特图每次只想展示一个月的数据，可以按月份切割甘特图吗？

甘特图按月份切换数据，但是好像会自动计算那个小块块，好像是根据页面宽度在变化？想问一下这个可以怎么改一下，麻烦大佬了

自定义滑块插槽content，插槽内容时间不变

当我自定义滑块插槽content，插槽内容为 data.startDate ，我想实现拖动滑块，插槽里面的时间也跟着改变，我该怎么做，
下面是我的插槽内容

<x-gantt-slider :resize-left="true" :resize-right="true" bg-color="green" empty-data="" :move="onMoveSlider">
	<template v-slot:content="{ data, level }">
		<div v-if="level === 1" class="slider-level-one"></div>
		<div v-else-if="level !== 1" style="background-color: green; display: flex; justify-content: center; height: 20px; border-radius: 3px">{{data.startDate}}</div>
	</template>
</x-gantt-slider>

JGanttColumn重复加载的问题

打开带有甘特图的页面后跳转到别的页面再跳转回来时,表格内容会重复加载.
若项目中只有一处页面使用甘特图,可以通过keep-alive避免,但是有多出页面使用甘特图,依然会出现这种情况.

[BUG] 在 x-gantt-column 中无法通过修改 row 实现数据联动

Describe the bug
在 x-gantt-column 中使用组件对 row 做修改，没有联动变化。

To Reproduce

1. x-gantt-column 开始和结束时间使用日期组件渲染
2. 使用 v-model 将 row 的值绑定到日期组件
3. 操作组件修改数据，组件的值没有变化；
4. 鼠标移动到组件上方，值随即变化为修改的值；
5. 使用vue devtool 查看 data，确认数据是有变化；
6. 但右侧甘特图，仍然不变。

Expected behavior
操作组件应该要可以修改数据并联动甘特图。

Versions

• Version 2.0.3
• Browser Edge 113.0.1774.50

Additional context

<x-gantt
        data-id="id"
        :data="dataList"
        :ref="ganttRef"
        start-key="planStartTime"
        end-key="planEndTime"
      >
        <x-gantt-column label="标题" prop="name" />
        <x-gantt-column label="进度" prop="progress" />
        <x-gantt-column label="开始日期" width="100">
          <template #default="{ row }">
            <el-date-picker
              class="date-picker"
              v-model="row.planStartTime"
              type="date"
              placeholder="选择日期"
              size="small"
              style="width: 100%"
              :clearable="false"
              value-format="YYYY-MM-DD"
            />
          </template>
        </x-gantt-column>
        <x-gantt-column label="结束日期" width="100">
          <template #default="{ row }">
            <el-date-picker
              class="date-picker"
              v-model="row.planEndTime"
              type="date"
              placeholder="选择日期"
              size="small"
              style="width: 100%"
              :clearable="false"
              value-format="YYYY-MM-DD"
            />
          </template>
        </x-gantt-column>
</x-gantt>

const dataList = ref([
    {
      id: 1660933075125125000,
      name: '小鸡快跑计划',
      projectId: 1,
      ganttDataType: 39,
      planStartTime: '2023-10-04 15:21:27',
      planEndTime: '2023-11-01 20:33:39',
      assign: 'anim Ut veniam elit aliquip',
      progress: 58,
      estimatedHours: 100,
      totalManHour: 84,
      remainingManHour: 93,
      status: 1,
      children: [
        {
          id: 1661169300083720200,
          parentId: 1660933075125125000,
          name: '孵鸡蛋',
          projectId: 1,
          ganttDataType: 2,
          planStartTime: '2023-11-04 15:21:27',
          planEndTime: '2023-12-01 20:33:39',
          assign: '陈小东',
          progress: 58,
          estimatedHours: 100,
          totalManHour: 84,
          remainingManHour: 93,
          status: 1,
        },
    ]
}

[FEATURE]能否同一行有多条甘特图

[FEATURE] gantt-column-size能否支持更多大小设定

现在有一个业务场景，希望月视图的模式下，月份的格子占比能够更小一些，以方便全局展示

[FEATURE] 甘特图的左侧列表可以有折叠收起的效果吗？

当左侧列表字段过多时，右侧甘特图的空间就比较少了，期待左侧列表可以有一个折叠收起的功能，谢谢

vue 2.x 样式在哪啊怎么找不到啊

vue 2.x 样式在哪啊怎么找不到啊

This dependency was not found:

• jz-gantt/lib/jz-gantt.css in ./src/main.js

To install it, you can run: npm install --save jz-gantt/lib/jz-gantt.css

[BUG]vue2版本的和elementUI的表格有冲突 会导致表格文本内容消失

vue版本2.6.14
elemenUI版本2.15.9
@xpyjs/gantt-vue2 1.0.1

vue 2 和vue3 相差大吗

你好我们的项目已经定了用vue2 但是想用您的组件 ，想问一下 vue2 和vue3 实现的效果相差大吗 ，vue2 能实现像demo 一样的效果吗

[FEATURE] I added props for text. Please merge it

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

修改甘特图数据报错的严重问题

版本：v1.1.10
vue3使用组合式API方式对甘特图绑定的数据进行修改，除了置空外，所有其它操作全部报错，莫非是我写代码的姿势不对？错误截图如下：

测试代码截图如下：

增删改的按钮需要自己添加吗

你好，在你npm包里面，想要增删改按钮是需要自己重写吗

XGanttColumn 增加hidden属性

因为看到宽度目前是计算出来的，只能通过width: 0 的方法设置某列hidden

[FEATURE]

你好，请问复选框当有子级的时候能否联动选择

后续可以添加一个基线对比的功能吗

根组件中能不能添加一个基线对比数据的参数，用来添加基线数据的数组，基线只需要有对比效果就好了。

一个样式小bug以及优化样式配置的建议

目前可以配置header-style与body-style，body-style基本够用，但头部的样式只能配置背景色与文字颜色，如果想设置padding等，只能覆盖，建议提供header-class，直接可配置所需的样式。
同样的，对于表格左侧内容，要设置样式只能通过插槽，重写样式都行不通，因为表格内容的box-sizing不是border-box，如果设置padding之类，就会导致宽度不对，希望可以改进。
表格内容行样式有个小bug，.gt-column .gt-column__chunk的line-height为height，应该为calc(var(--row-height) - 4px)

下图是我调整的样式，总的来说，有一丢丢麻烦：

[FEATURE]

大佬，请问下目前有内置插槽来自定义编辑表单的功能吗，还有前置任务的连线功能

[FEATURE]同一任务多个滑块需求

应用场景：项目进度有计划开始时间还有计划结束时间，所以存在实际开始时间和实际结束时间，需要对比两者的时间差，所以同一任务需要显示两个滑块

[BUG] jumpToDate 对于起始边缘日期对不齐

Describe the bug
对于起始边缘日期的 jumpToDate 设置后跳转的日期对不齐。

To Reproduce

1. 设置 rowClick 事件，点击后 调用 jumpToDate 设置 startDate；
2. 点击第一笔数据，实际跳转日期为 startDate 两天后；

Expected behavior
跳转到设置的日期。

Versions

• Version 2.0.3
• Browser Edge 113.0.1774.50

Additional context

<x-gantt
    data-id="id"
    :data="dataList"
    :ref="ganttRef"
    start-key="planStartTime"
    end-key="planEndTime"
    @row-click="rowClick"
  >
    <x-gantt-column label="标题" prop="name" />
    <x-gantt-column label="进度" prop="progress" />
    <x-gantt-column label="开始日期" width="100">
      <template #default="{ row }">
        <el-date-picker
          class="date-picker"
          v-model="row.planStartTime"
          type="date"
          placeholder="选择日期"
          size="small"
          style="width: 100%"
          :clearable="false"
          value-format="YYYY-MM-DD"
        />
      </template>
    </x-gantt-column>
    <x-gantt-column label="结束日期" width="100">
      <template #default="{ row }">
        <el-date-picker
          class="date-picker"
          v-model="row.planEndTime"
          type="date"
          placeholder="选择日期"
          size="small"
          style="width: 100%"
          :clearable="false"
          value-format="YYYY-MM-DD"
        />
      </template>
    </x-gantt-column>
</x-gantt>

const dataList = ref([
    {
      id: 1660933075125125000,
      name: '小鸡快跑计划',
      projectId: 1,
      ganttDataType: 39,
      planStartTime: '2023-10-04 15:21:27',
      planEndTime: '2023-11-01 20:33:39',
      assign: 'anim Ut veniam elit aliquip',
      progress: 58,
      estimatedHours: 100,
      totalManHour: 84,
      remainingManHour: 93,
      status: 1,
      children: [
        {
          id: 1661169300083720200,
          parentId: 1660933075125125000,
          name: '孵鸡蛋',
          projectId: 1,
          ganttDataType: 2,
          planStartTime: '2023-11-04 15:21:27',
          planEndTime: '2023-12-01 20:33:39',
          assign: '陈小东',
          progress: 58,
          estimatedHours: 100,
          totalManHour: 84,
          remainingManHour: 93,
          status: 1,
        },
        {
          id: 3,
          parentId: 1660933075125125000,
          name: '框架搭建',
          projectId: 1,
          ganttDataType: 2,
          planStartTime: '2023-10-19',
          planEndTime: '2023-11-14',
          assign: '子路',
          progress: 18,
          estimatedHours: 78,
          totalManHour: 6,
          remainingManHour: 26,
          status: 1,
        },
        {
          id: 4,
          parentId: 1660933075125125000,
          name: '发布',
          projectId: 1,
          ganttDataType: 1,
          planStartTime: '2023-11-14',
          planEndTime: '2023-11-15',
          assign: '子路',
          progress: 18,
          estimatedHours: 78,
          totalManHour: 6,
          remainingManHour: 26,
          status: 1,
        },
    ]
}
const ganttRef = ref();
function rowClick(data) {
  ganttRef.value?.jumpToDate(new Date(data.planStartTime));
}

如何一行中显示多个任务

你好看了你的组件 写的很好 ，但是我有个问题想咨询一下，因为我们的需求是一个小组 不能同时做两个任务，所以每个任务都是接在前一个任务后的,所以您这个组件可以一行放多个任务条吗？

鼠标放在时间条上，时间轴显示不正确

现在就是时间轴的背景色显示不正确，跟我的时间条不符合。请问有取消这个背景色的方法吗？或者这个需要怎么解决呢

[FEATURE]有增加前置计划功能的打算不？

控件好久没更新了，会考虑增加前置计划功能不？

作者后续可以支持自定义时间线背景色吗

像todayColor和weekendColor一样，因为可能会有标记节假日的情况

样式冲突小问题

style.css中部分样式没有前缀，也没有属性限制，影响了其它样式，我使用了element-plus，其中的.icon与.today属性让我的图标变肥了好多，日期控件打开，出现一个大大的“今”字图标，我都惊呆了。^^

列组件中最后一个显示不出内容[BUG]

你好麻烦问下 XGanttColumn组件的最后一个显示不出来，是我配的有问题吗？

动态渲染column

您好 这个j-gantt-column支持动态渲染吗 我想显示的列是根据不同需求通过配置出来的需要显示哪几个字段 能否支持v-for循环

[FEATURE]添加支持通过拖拽关联任务，展示任务依赖关系线

任务之间的依赖关系主要有以下四种：

• Finish to Start (FS)​ — 结束到开始，即A任务必须先结束，B任务才能开始。这是最常见的一种依赖关系。
• Start to Start (SS) — 开始到开始，即A任务必须先开始，B任务才能开始。
• Finish to Finish (FF) — 结束到结束，即A任务必须先结束，B任务才能结束。
• Start to Finish (SF) — 开始到结束，即A任务必须先结束，B任务才能结束。

页面中有多个甘特图时显示有重大bug

使用版本：v1.1.10
表现在两个方面：
1.一个页面中同时使用多个甘特图时，显示的都是最后那个甘特图的样子；
2.假如使用类似tab的形式切换甘特图，切换的是display: none与display: block，这里分两种情况：
2.1 如果只有两个tab，第1个默认显示，第2个默认隐藏，那么初始化时第1个甘特图虽然显示的是第2个甘特图的数据，但表面看上去显示还是正常的，但是让第2个甘特图也显示时，第2个甘特图右侧会直接将设置面板显示出来；
2.2 如果有三个tab，第1个默认显示，第2个默认隐藏，那么初始化时第1个甘特图右边只会显示进度条，表格边框和日期都不显示，空白一片，然后让第2个和第3个甘特图显示时，后2个右侧的设置面板会显示出来。

测试代码很简单，如下：

<template>
  <div style="height: 30%">
    <gantt :datas="ganttDatas[0]" />
  </div>
  <div style="height: 30%" v-show="divShow">
    <gantt :datas="ganttDatas[1]" />
  </div>
  <div style="height: 30%" v-show="divShow">
    <gantt :datas="ganttDatas[2]" />
  </div>
  <el-button type="primary" @click="onClick">测试</el-button>
</template>

<script>
import { ref } from 'vue'
import Gantt from '@/components/Gantt.vue'

export default {
  name: 'Home',
  components: { Gantt },
  setup () {
    const ganttData1 = {
      id: '01',
      startTime: new Date('2021-10-30').getTime(),
      endTime: new Date('2021-11-05').getTime()
    }

    const ganttData2 = {
      id: '02',
      startTime: new Date('2021-11-06').getTime(),
      endTime: new Date('2021-11-15').getTime()
    }

    const ganttData3 = {
      id: '03',
      startTime: new Date('2021-11-15').getTime(),
      endTime: new Date('2021-11-25').getTime()
    }

    var ganttDatas = ref([ganttData1, ganttData2, ganttData3])

    const divShow = ref(false)
    const onClick = () => {
      divShow.value = true
    }

    return {
      ganttDatas,
      divShow,
      onClick
    }
  }
}
</script>

[BUG] 当数据动态绑定以后，dataList的Length没变化，界面不刷新

Describe the bug
清空DataList，重新赋值（数据长度一致），页面不变

[BUG]更新到1.3.0版本样式错乱了

您好，更新到1.3.0版本样式会错乱，原本的1.2.0版本的效果：

更新到1.3.0版本之后的效果是这样的：

其他的代码都不变，是不是更新到1.3.0之后需要做什么其他的设置？