React-Ganttastic

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

基于dayjs.js开发，更轻便

如有问题联系 邮箱：[e-mail]

安装

推荐使用 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	重置大小