React-ganttastic NPM

React-Ganttastic

一款简洁的甘特图插件，并且支持跨天拖动
基于dayjs.js开发
如有问题联系邮箱：hyj-228@qq.com

安装

推荐使用 npm/yarn 安装

npm install react-ganttastic

用法

  const data: IChartRows<{name:string}> = {
    "2023-08-13": [],
    "2023-08-14": [
      {
        role: { name: "第一" },
        children: [
          {
            start: "2023-8-14 04:00",
            end: "2023-8-15 07:00",
            // rowHeight:0 // 可重置row的感度
            // immobile: true, //是否固定，固定后不能拖动
          },
        ],
      },
    ],
    "2023-08-15": [
      {
        role: { name: "第一" },
        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: "第二" },
        type: "line",
        children: [
          {
            start: "2023-8-15 15:00",
            end: "2023-8-15 17:00",
          },
        ],
      },
    ],
    "2023-08-16": [
      {
        role: { name: "第一" },
        children: [],
      },
      {
        role: { name: "第二" },
        children: [],
      },
    ],
    "2023-08-17": [
      {
        role: { name: "第一" },
        children: [],
      },
      {
        role: { name: "第二" },
        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	用力拖拽的配置项	{width?: number; duration?: number ｜ { start?: number; end?: number };}	{width:20,duration:1 60 60}
barStart	指定开始时间	string	start
barEnd	指定结束时间	string	end
immobile	是否可以拖动	boolean	true
dateFormat	日期格式化方式	string	YYYY-MM-DD HH:mm:ss
timeaxisConfig	顶部时间配置	{className?: string;style?: React.CSSProperties;format?: (time: string) => React.ReactNode;}
dateConfig	日期配置	{className?: string; width?: number; format?: (time: string) => React.ReactNode;}	{width:120}
dragConfig	拖动手柄配置	{left: { className?: string; format?: (time: string) => React.ReactNode; }; right?: { className?: string; format?: (time: string) => React.ReactNode; };}

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; |onContextMenu?: (value: {bar: IGanttBarObject;e: MouseEvent;datetime?: string ｜ Date}) => void;

方法	说明
onFormatJson	格式化数据
onResize	重置大小