JS甘特图插件MZGantt: 数据导入功能

MZGantt 提供了 importData(data) 方法，用于动态替换甘特图中的数据。该方法适用于需要从外部数据源（如本地文件）加载数据并更新甘特图的场景。导入的数据必须符合 MZGantt 的格式规范，否则可能导致渲染异常。

数据格式要求

以下为 data 参数的核心字段说明，分为必填项和可选项：

必填项

• id: 字符串类型，任务的唯一标识符。
• name: 字符串类型，任务的显示名称。

可选项

• isGroup: 数值（0 或 1），标记是否为父任务（可包含子任务）。
• plan: 数组类型，包含计划时间、进度等属性（如 start, end, pctComp）。
• preNodes: 字符串或数组，定义任务依赖关系（前置任务 ID）。
• parentId: 字符串类型，指定父任务 ID 以实现层级结构。
• isMS: 数值（0 或 1），标记是否为里程碑任务。

示例数据片段

const newData = [
  {
    id: "task1",
    name: "需求分析",
    isGroup: 1,
    plan: [{ start: "2024-01-01", end: "2024-01-05", pctComp: 30 }],
    preNodes: ["task0"]
  }
];

操作流程

1. 准备数据
   确保外部数据转换为符合上述格式的数组，嵌套子任务需通过 parentId 关联。(具体细节参考官网：https://mzgantt.com/docs)

2. 调用导入方法
   执行 ganttInstance.importData(newData)，甘特图会立即刷新显示新数据。所有导入的任务会自动标记为新增状态（operation: "add"）。

3. 提交保存
   业务系统中将变更提交至后端即可。

注意事项

• 数据完整性校验：缺少必填字段可能导致渲染失败，建议在导入前校验 id 和 name。
• 自定义列：支持扩展字段，但需确保甘特图配置中已定义对应列。

通过灵活使用 importData，可以实现甘特图与本地数据的快速集成。