YJGantt

介绍

甘特图js版

使用示例

      import YJGantt from "./dist/YJGantt.js";
      let gantt = new YJGantt({
        target: "#container",
        options: {
          headerHeight: 50, // 头部高度
          step: 5, // 每个块包含的刻度数量
          stepWidth: 20, // 每个刻度宽度
          rowHeight: 30, // 行高
          taskHeight: 20, // 任务高度
          taskRadius: 5, // 任务圆角
          minWidth: 100, // 画布最小宽度，会转换为最小块数，如果为字符串则表示为父元素的百分比，但可能会超出父元素
          preBlock: 1, // 左侧空出块数量
          postBlock: 1, // 右侧空出块数量
          minBlock: 1, // 最小块数
          headerTextFormat: v => formatText(v), // 格式化头部文本
          taskList: [
            // 任务列表
            {
              id: 1, // 任务id
              start: 3, // 开始值
              end: 5, // 结束值
              label: "testtesttest", // 展示名称
            },
          ],
        },
      });

      // 事件
      gantt.onStopControl = function (e) {}; // 停止拖拽时触发

      gantt.onStartControl = function (e) {};  // 开始拖拽时触发

      // 方法
      gantt.setOptions({ options }); // 更新配置

      gantt.setTaskList({ taskList }); // 更新任务列表

开发环境

Node.JS >= 18.6.0