React-Ganttastic

一款简洁的甘特图插件，并且支持跨天拖动

基于dayjs.js开发，更轻便

如有问题联系 邮箱：[email protected]

安装

推荐使用 npm/yarn 安装

npm install react-ganttastic

用法

  const data: IChartRows<{name:string}> = {
    "2023-08-13": [],
    "2023-08-14": [
      {
        role: { name: "第一" },
        id:1, //唯一值
        children: [
          {
            start: "2023-8-14 04:00",
            end: "2023-8-15 07:00",
            // rowHeight:0 // 可重置row的感度
            // immobile: true, //是否固定，固定后不能拖动
          },
        ],
      },
    ],
    "2023-08-15": [
      {
        role: { name: "第一" },
        id:1,
        children: [
          {
            start: "2023-8-15 01:00",
            end: "2023-8-15 07:00",
          },
          {
            start: "2023-8-15 09:00",
            end: "2023-8-15 16:00",
          },
        ],
      },
      {
        role: { name: "第二" },
        id:2,
        type: "line",
        children: [
          {
            start: "2023-8-15 15:00",
            end: "2023-8-15 17:00",
          },
        ],
      },
    ],
    "2023-08-16": [
      {
        role: { name: "第一" },
        id:1,
        children: [],
      },
      {
        role: { name: "第二" },
        id:2,
        children: [],
      },
    ],
    "2023-08-17": [
      {
        role: { name: "第一" },
        id:1,
        children: [],
      },
      {
        role: { name: "第二" },
        id:2,
        children: [],
      },
    ],
  }
      <GanttChart
        barStart="start" //开始时间的标识 默认：start
        barEnd="end"//结束时间的标识 默认是：end
        value={chartData}
        rowHeight={50} //bar感度 默认70
        ref={chartRef}
        multipleRow //是否多行 默认false
        /* 包含两个方法 */
        /* 格式化返回值 */
        /* onFormatJson: (value: IChartRows<RecordType>) => IChartRows<RecordType>; */
        /* 重置宽度 */
        /* onResize: (width?: number) => void; */
        /* 值变化的事件 */
        onChange={(value) => setChartData(value)}
      >
      // children 必填
        {(el) => (
          <React.Fragment>
            <div className="flex_title">{el.name}</div>
            {(el.children || []).map((el) => (
              <GanttBar
                bar={el}
                key={el.id}
                style={{ background: "#4F7EFF",
                border: '1px solid #FFFFFF', borderRadius: 20, height: 30 }}
              >
              /* 可自定义结构 */
              </GanttBar>
            ))}
          </React.Fragment>
        )}
      </GanttChart>

文档

GanttChart 配置

| 参数 | 说明 | 类型 | 默认值 | | -------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | | value | 数据 | IChartRows< RecordType > | [] | | rowHeight | 行高度 | number | 70 | | step | 每次拖动的步长，为数字时必须大于 0 且必须为整数，为 auto 时不限制步长 | number ｜auto | auto | | depthConfig | 用力拖拽的配置项 | depthConfig 配置 |{width:20,duration:3600} | | barStart | 指定开始时间 | string | start | | barEnd | 指定结束时间 | string | end | | immobile | 是否可以拖动 | boolean | true | | dateFormat | 日期格式化方式 | string | YYYY-MM-DD HH:mm:ss | | timeaxisConfig | 顶部时间配置 | timeaxisConfig 配置 | | | dateConfig | 日期配置 | {className?: string; width?: number; format?: (time: string) => React.ReactNode;} | {width:120} | | dragConfig | 拖动手柄配置 | {left: dragConfig配置 }; right?: dragConfig配置 } | |

timeaxisConfig 配置

| 参数 | 说明 | 类型 | 默认值 | | --------- | ------ | ------- | ---- | | className | class类名 | string | - | | style | 样式 | React.CSSProperties | - | | format | 格式化时间 | (time: string) => React.ReactNode | - | | extraContent | 额外的元素 | React.ReactNode | - |

depthConfig配置

| 参数 | 说明 | 类型 | 默认值 | | --------- | ------ | ------- | ------ | | width | 拖拽的距离达到多少时触发 | number | 20 | | duration | 拖拽后新增的大小，单位秒 | number ｜ { start?: number; end?: number } | 3600 |

dragConfig配置

| 参数 | 说明 | 类型 | 默认值 | | --------- | ------ | ------- | ------ | | className | class类名 | string | - | | style | 样式 | React.CSSProperties | - |

GanttBar 配置

| 参数 | 说明 | 类型 | 默认值 | | --------- | ------ | ------- | ---- | | immobile | 是否可以拖动 | boolean | true | | rowHeight | 行高度 | number | 70 |

GanttChart 方法

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ----- | ----- | ------ | |onChange | 改变时 | (value:IChartRows< RecordType >)=>void | - | |onClick | 点击时 | (value: { bar: IGanttBarObject; e: MouseEvent; datetime?: string ｜ Date; }) => void | - | |onMouseDown | 鼠标按下 | (value: { bar: IGanttBarObject; e: MouseEvent; datetime?: string ｜ Date; }) => void; | - | |onMouseUp | 鼠标抬起 | (value: {bar: IGanttBarObject;e: MouseEvent;datetime?: string ｜ Date;}) => void;| - | |onDblClick | 鼠标双击 | (value: {bar: IGanttBarObject;e: MouseEvent;datetime?: string ｜ Dat}) => void;| - | |onMouseEnter | 鼠标进入 | (value: { bar: IGanttBarObject; e: MouseEvent }) => void; | - | |onMouseLeave | 鼠标移出 | (value: { bar: IGanttBarObject; e: MouseEvent }) => void; | - | |onDragStart | 开始拖拽 | (value: { bar: IGanttBarObject; e: MouseEvent }) => void; | - | |onDrag | 拖拽 | (value: { bar: IGanttBarObject; e: MouseEvent }) => void; | - | |onDragEnd | 结束拖拽 | (value: {bar: IGanttBarObject;e: MouseEvent;movedBars?: Map<IGanttBarObject, { oldStart: string; oldEnd: string }}) => void; | - |

ref 方法

| 参数 | 说明 | | ------------ | ----- | | onFormatJson | 格式化数据 | | onResize | 重置大小 |