重生之--js原生甘特图实现

需求:

一个树形结构,根据子节点的时间范围显示显示进度 ,不同的时间范围对应不同的颜色

数据类型大概是这个样子的

甘特图 dom部分

首先要计算所有节点的 最大时间和最小时间

然后再计算每个甘特图的宽度

再计算他的偏移量

再计算颜色

相关推荐
OenAuth.Core10 小时前
更快登录、更稳协作、更好导出:最好用的免费甘特图星甘StarGantt V3.3更新说明
甘特图
daols882 天前
vue甘特图vxe-gantt实现点击任务条弹出编辑表单
前端·vue.js·甘特图·vxe-gantt
关中老四4 天前
【原生JS甘特图MZGantt 】如何给父任务设置独立进度条
前端·javascript·甘特图
daols8812 天前
vue甘特图 vxe-gantt 如何实现双击连接线自动删除线功能(含二次确认)
vue.js·甘特图·vxe-gantt
关中老四16 天前
【js/web甘特图插件MZGantt】如何使用外部弹框添加和修改任务(updRows方法使用说明)
前端·javascript·甘特图·甘特图插件
沉睡的无敌雄狮16 天前
ISO9071外的质控实践:福尔蒂研发-QA-中试‘铁三角’机制(含架构与甘特图)
线性回归·甘特图·宽度优先
进度猫17 天前
这才是制造业项目管理的正确打开方式
项目管理·甘特图·项目经理·项目管理软件
daols881 个月前
如何使用 vue 甘特图 vxe-gantt 渲染显示多行任务,预计完成日期和实际完成日期多条任务条
vue.js·甘特图·vxe-gantt
xiami_world1 个月前
drawio文件如何在线打开?7种解决方案汇总
流程图·开源软件·甘特图·draw.io
大猩猩X2 个月前
vue 甘特图 vxe-gantt 设置每个进度条分为计划和实际两条,实现上下分布任务条
vue.js·甘特图·vxe-table·vxe-gantt