- 综合排序
- 最热优先
- 最新优先
js甘特图插件(MZGantt)技术文档
MZGantt甘特图插件MZGantt是一款原生js开发的甘特图插件。支持vue，ts，js等，支持流行的各种前端框架，可以快速引用到我们的web程序或者移动应用中。 MZGantt支持js引用和npm安装两种使用方式。下载使用前，先下载普通js版插件或使用npm进行安装。 引用MZGantt插件在html页面头部中引入如下js包：普通js引用:展开代码语言：JavaScriptAI代码解释<! //(1)使用插件npm安装包时，如果需要编辑、导出和移动端支持功能，引用相应功能包后，需要在此启动//(2)使用插件普通js包时，以下启动（start）命令可以略去。 八.下载普通js版进入下载：MZGantt甘特图插件（普通js版）或者使用CDN：<scriptlanguage="javascript"src="https://gcore.jsdelivr.net/
26200编辑于 2026-01-13- 来自专栏MZGantt甘特图插件使用分享
JS甘特图插件MZGantt: 数据导入功能
MZGantt提供了importData(data)方法，用于动态替换甘特图中的数据。该方法适用于需要从外部数据源（如本地文件）加载数据并更新甘特图的场景。 (具体细节参考官网：https://mzgantt.com/docs)调用导入方法执行ganttInstance.importData(newData)，甘特图会立即刷新显示新数据。 自定义列：支持扩展字段，但需确保甘特图配置中已定义对应列。通过灵活使用importData，可以实现甘特图与本地数据的快速集成。
12110编辑于 2026-01-29 - 来自专栏MZGantt甘特图插件使用分享
js甘特图插件MZGantt 1.0.15 版本发布
vue中可以使用npminstallmzgantt@1.0.15可直接安装，普通js版本到官网下载。
8710编辑于 2026-02-07 - 来自专栏MZGantt甘特图插件使用分享
JS甘特图插件MZGantt：自定义右键菜单
注意事项图标路径需使用相对项目根目录的路径回调函数中的 row 参数包含当前触发菜单的甘特行数据菜单项按数组顺序从上到下显示通过这种配置方式，可以轻松扩展甘特图的交互功能
14310编辑于 2026-01-29 - 来自专栏MZGantt甘特图插件使用分享
原生JS甘特图插件MZGantt：多选下拉列表实现详解
MZGantt中实现多选下拉列表功能，需在列定义对象中配置特定属性：展开代码语言：JavaScriptAI代码解释{name:"testCol4",field:"custCol",title:"myCol3"
11510编辑于 2026-02-03 - 来自专栏MZGantt甘特图插件使用分享
JS甘特图插件MZGantt：有关数据顺序的详细说明
数据排序在MZGantt中的关键作用MZGantt作为一款专业的javascript甘特图插件，数据排序是确保任务正确显示的基础环节。任务数据的顺序直接影响甘特图的层级结构和时间轴展示效果。 插件生成数据的排序处理通过MZGantt插件进行增删改操作时，系统会自动为每行任务数据添加seq属性。该属性采用自上而下递增的数值序列，精确记录任务在视图中的显示顺序。
16010编辑于 2026-01-27 - 来自专栏MZGantt甘特图插件使用分享
【纯js甘特图插件MZGantt】动态数据加载与渲染技术
2.初始化甘特图及插件初始化MZGantt实例后，依次启动编辑器、导出、移动端支持等插件，并通过createGantt方法绑定DOM容器和视图模式（如"day"）。最后传入配置对象完成基础设置。 3.数据监听与更新通过myGantt.listener获取数据监听器对象。在异步请求（如AJAX）的success回调中，直接为listener.rawGanttData赋值即可触发甘特图动态渲染。 3.实时性适用于需要频繁更新数据的场景（如实时协作系统），数据变化可即时反映到甘特图中。▮典型应用场景异步数据加载：从后端API获取任务数据后动态渲染。 ajax的前，不要放里面---------------------->constmyGantt=MZGantt.init();//定义甘特图实例MZGanttEditor.start(myGantt); //启动编辑myGantt.createGantt("GanttChartDIV","day");//创建甘特图对象myGantt.config(ganttConfig);//配置甘特图//定义监听器vardata
10210编辑于 2026-02-12 - 来自专栏MZGantt甘特图插件使用分享
MZGantt：原生JavaScript甘特图插件
MZGantt是一款基于原生JavaScript开发的Web甘特图插件，专为项目管理系统、生产排程等进度计划管理场景设计。 其无需安装插件，兼容所有主流浏览器及前端框架，支持多国语言本地化，提供丰富的功能与卓越的性能表现。 核心优势跨平台兼容性采用纯JavaScript开发，天然支持所有主流浏览器（Chrome、Firefox、Edge等），无需依赖ActiveX等插件技术。
14410编辑于 2026-02-04 - 来自专栏马洪彪
免费JS甘特图组件dhtmlxgantt
Nuget nuget install DHTMLX.Gantt npm npm install dhtmlx-gantt 或使用CDN、下载JS库引入（简单HTML应用）。 "></script> js <script type="text/javascript" src="codebase/dhtmlxgantt.<em>js</em>"></script> <link rel="stylesheet 默认布局为左侧是任务信息列表，右侧是<em>甘特图</em>时间线，自定义布局可在右侧、下方显示更多信息。 自定义布局可显示资源列表和资源的<em>甘特图</em>时间线，但仅Pro版本可用。 使用<em>插件</em>可扩展<em>甘特图</em>的基本功能。 使用时，先引入<em>插件</em>，然后按照<em>插件</em>的使用配置<em>甘特图</em>（config属性配置）。
18.9K31发布于 2021-05-19 - 来自专栏MZGantt甘特图插件使用分享
JS甘特图插件MZGantt：工作时间段设置详解（1.0.12版）
显示全天时间（onlyShowWorkhours:"N"）时间轴完整显示24小时，工作时段可能通过颜色或标记区分（具体效果依赖插件主题）。注意事项时间格式为HH:mm或者H，且结束时间需晚于开始时间。
20310编辑于 2026-01-27 - 来自专栏葡萄城控件技术团队
有哪些好用的甘特图插件?
甘特图对于业务场景中的工程项目管理、预算执行、生产计划等都能将原有的表格数据，转变为直观的甘特图模式。 作为纯前端表格控件SpreadJS 的插件，甘特图可以作为一个特殊的“Sheet”融入已有的表格中，方便进行数据的可视化展示，也能更直观的查看计划执行情况，如下图所示： SpreadJS甘特图插件具备以下的功能 基于 SpreadJS 的底层数据模型，能够将树形数据展示为甘特图表格和图表，支持 ID、Level、Children类型数据结构 // the id-parentId structure schema 支持对图表区域进行缩放 3. 支持按照不同单位进行滚动 4. 可对图表中的对象进行定制 5. 可对日历进行配置 6. -180313-1-1.html 预览版产品包有以下的内容： 甘特图功能说明文档 7个插件示例：初始化甘特图、缩放及滚动、定制样式、布局设置、任务设置、日历设置、导入导出
1.1K30编辑于 2023-10-16 - 来自专栏MZGantt甘特图插件使用分享
【js甘特图插件MZGantt】如何使用外部弹框添加和修改任务
在MZGantt甘特图插件中，updRows方法为外部弹框与甘特图数据交互提供了高效途径。该方法支持通过弹框提交任务数据，适用于添加、编辑、插入任务等场景，避免行内编辑的局限性。 （0否1是）resId:"01",//担当者IDplan:[{//计划时段start:"2023-12-20",end:"2023-12-25",dur:5}]};构造的任务对象中，如果未设置id，则插件会自动生成
9910编辑于 2026-03-09 - 来自专栏MZGantt甘特图插件使用分享
【JS甘特图插件MZGantt】实现带图标的下拉列表框，只需2步
/images/2.png"},{"value":"3","text":"刘德华",src:"./images/3.png"},{"value":"4","text":"张学友",src:".
14710编辑于 2026-02-04 - 来自专栏MZGantt甘特图插件使用分享
【jsweb甘特图插件MZGantt】1.0.18版本发布
MZGantt1.0.18版本对插件做了进一步优化和改善，进一步了提升用户体验与开发效率。以下是新版本的核心改进内容。 升级与集成建议推荐通过npm安装最新版本：展开代码语言：BashAI代码解释npminstallmzgantt@1.0.18JS版本用户可从官网下载更新包。
12510编辑于 2026-03-04 - 来自专栏MZGantt甘特图插件使用分享
jsweb甘特图插件MZGantt： 进度条联动方式设置方法
MZGantt 提供了强大的任务进度条联动功能，允许在拖动某个任务进度条时，其他相关任务的进度条自动更新。该功能通过 linkUpdMode 参数配置实现，支持多种联动模式和自定义样式。
10310编辑于 2026-02-05 给web页面添加甘特图功能，只需三条命令！
使用MZGantt插件，给web页面添加一个甘特图，只需要三条命令。请看示例。展开代码语言：CSSAI代码解释//************开始*********<! --1.导入甘特图插件--><linkrel="stylesheet"type="text/css"href="https://cdn.jsdelivr.net/npm/mzgantt@1.0.7/cdn ,"dur":10}],"resId":"刘德华","pctComp":40,}];//命令3：创建甘特图MZGantt.createGantt("GanttChartDIV","day",{},taskData ">//MZGantt.LicenseKey="0oruALdKiUsAA4lLAkFGrAJ3g";//第二步：设置甘特图数据vartaskData=[{"id":11,"name":"任务名称1", ></body></html>有需要的朋友，可以到官网(www.mzgantt..com)下载示例程序：MZGantt甘特图插件_普通js版示例程序:MZGantt是一款原生js开发的甘特图插件。
20910编辑于 2026-01-13- 来自专栏小壮和前端
js写插件教程
#demo-1,#demo-2{width: 200px;height: 200px;border: 1px solid #ddd;} </style> </head> <body> <h3> 点击add可以添加个自input的内容到div里并实现变颜色</h3> <! ；我为了方便都写到一个html中了；请把这个script标签中的内容单独写在一个js文件里 //整个插件写在一个立即执行函数里；就是function(){}();函数自执行；保证里面的变量不会与外界互相影响 号(叹号)或者;(分号)这不是写错了,为了防止那个二货写的js结束没有分号；而可能发生报错 /* ;function(win,doc,$,undefined){ }(window --这里是最简单的插件写法；当然还有传对象参数的插件等等。。。。--> </body> </html>
40.4K10发布于 2018-08-31 - 来自专栏快乐阿超
js拖拽框选插件
分享一个js的拖拽框选插件 官网：https://dragselect.com/ 源码：https://github.com/ThibaultJanBeyer/DragSelect.git 使用： pnpm height: 18px; border: 2px solid #13b8cb; background-color: #fff; position: absolute; top: 3px ; left: 3px; } .checkbox:before, .checkbox:after { content: ""; display: block; background-color
17.9K20编辑于 2022-08-21 - 来自专栏wfaceboss
js插件库+bootstrap
1.Chart.js 官网地址：http://chartjs.cn/ 2.优秀的bootstrap模板推荐 官网地址：http://bootswatch.com 3.wow+animate+js插件库
31.5K30发布于 2019-04-08 - 来自专栏YesDev研发协同工具
推荐3款好用的甘特图软件（免费+在线协同+Excel导出）
第1款：腾讯云文档表格的项目甘特图 在企业微信创建腾讯表格，选中：项目甘特图，即可在公司内部、部门之间进行项目甘特图的整理、收集、记录和共享协作。 不足：暂时不支持编辑甘特图，需要修改任务的计划完成时间和工作量，然后刷新。 适合： 软件项目的甘特图绘制、导出和汇报，融合需求管理、项目管理以及自动输出甘特图。 使用方式： 进入YesDev，切到需要查看甘特图的项目详情页，直接查看单个项目甘特图。 如果没有看到项目甘特图，可以先进入：高级模块，选中：甘特图，然后：确定。 合并多个项目的甘特图，进入：效能-项目分析-超级甘特图，选择多个项目即可。 Excel导出的文件效果，如：YesDev项目甘特图(3月16日).xlsx。 第3款：boardmix白板工具的项目甘特图 boardmix是一个灵活的白板工具，也包含了甘特图的模板，但不好找，因为模板名称叫：项目计划，不叫甘特图。
4.6K10编辑于 2024-03-20
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号