基于Axure的动态甘特图设计：实现任务增删改与时间拖拽交互
甘特图作为项目管理核心工具，其动态交互能力直接关系到团队协作效率。本文以Axure RP 9为载体，通过中继器（Repeater）与动态面板（Dynamic Panel）的深度结合，设计一款支持任务名称动态编辑、时间轴拖拽调整、进度实时计算的甘特图原型，满足多任务并行管理场景需求。
一、核心功能架构设计
1. 数据模型构建
采用中继器作为数据容器，预设以下字段：
-
任务名称（Text）：支持双击编辑
-
开始时间（Start）：数值化时间戳
-
结束时间（End）：数值化时间戳
-
完成进度（Progress）：0-100%数值
-
依赖关系（Dependency）：任务ID数组
通过中继器数据集实现动态绑定，例如设置任务A的依赖关系为任务B的ID，即可自动触发前置任务校验逻辑。
2. 交互组件矩阵
| 组件类型 | 核心功能 | 交互事件 |
|---|---|---|
| 中继器条目 | 任务卡片渲染 | 每项加载时绑定数据字段 |
| 动态面板 | 拖拽容器 | 拖动开始/移动/结束事件 |
| 矩形条形图 | 进度可视化 | 宽度动态计算（（结束-开始）*时间轴比例） |
| 输入框+按钮 | 任务增删改 | 添加行/删除行/更新行交互 |
| 里程碑标记 | 关键节点标注 | 条件显示（进度=100%时触发） |
二、关键交互实现方案
1. 动态任务管理
添加任务
-
点击"新增任务"按钮弹出模态框
-
输入名称、选择时间范围后，通过中继器"添加行"动作插入数据
删除任务
-
每行设置删除按钮
-
触发中继器"删除行"动作，通过
[[This]]引用当前行 -
联动删除依赖该任务的其他任务
修改任务
-
支持表格行内编辑，任务名称修改
-
支持条形图任意拖动，调节时间进度，任务开始结束位置
甘特图是项目管理工具，以条形图横向展示任务时间轴，纵轴列任务清单，条块长度代表时长，通过颜色或进度标识完成状态。它能清晰规划任务起止、依赖关系及资源分配，适用于项目规划、协调分工与进度监控。
设计浏览：【演示】【持续更新】高保真动态项目管理图表集原型 - AxureShop产品原型网
— — 往期推荐 — —
Axure大屏可视化模板：赋能多领域，开启数据展示新篇章_axre-CSDN博客
ElementUI3.0元件库+通用后台模板的高效融合
2小时完成1天工作量？有了这款Axure移动端元件库，设计如此简单-CSDN博客
CRM企业客户关系管理系统产品原型方案-CSDN博客
Axhub Charts：Axure原型设计的动态数据可视化元件库-CSDN博客