vue框架甘特图控件（dhtmlxGantt）

已于 2023-03-11 22:17:06 修改
阅读量1.6k 收藏 3
点赞数 1
文章标签： 甘特图 javascript 前端
于 2022-12-16 14:12:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sunwork888/article/details/128342158
版权
本文介绍如何将DHTMLX Gantt图表与Vue.js框架集成，包括逐步教程和演示源代码，帮助开发者快速掌握使用技巧并应用于实际项目中。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

官网JavaScript UI Framework - HTML5 Controls Library - DHTMLXJavaScript UI framework for high-speed web and mobile app development with customizable HTML5 UI controls. Free trial version available.https://dhtmlx.comGit及实例

GitHub - DHTMLX/gantt: GPL version of Javascript Gantt Charthttps://github.com/DHTMLX/gantt 文档

How To Use dhtmlxGantt with Vue.js Framework - Tutorial and DemoFollow step-by-step tutorial that will help you to integrate dhtmlxGantt, JS Gantt chart, with Vue.js, popular JavaScript framework. Demo sources included.https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/

attachEvent Gantt Docshttps://docs.dhtmlx.com/gantt/api__gantt_attachevent.html

DHTMLX - Gantt. Clone a task with all its subtasks and linkshttps://snippet.dhtmlx.com/b33jfmws?mode=wide

煮吧姐
关注
Vue项目的甘特图组件：dhtmlx-gantt使用教程和实现效果展示
Yy55gc25112的博客
10-12 1万+
公司的甘特图需求，研究了几个组件后，选择使用 dhtmlx-gantt 进行实现，dhtmlx-gantt使用其实是偏简单的，文档虽然是英文，但配合翻译也是可以看懂的，下面将公司需求的代码实现粘贴出来，并简单介绍一下使用方法，希望对你有帮助。下面讲一下 dhtmlx-gantt 的一些配置项，也可以说是我用到的配置项，更多的就要参考官方文档了。需求是不需要bar连线的，所以将bar连线注释掉了，连线也是可以有的。如果你的页面能展示出来基本样式，那么就成功啦，咱们继续下一步。然后在css内定义样式就好啦。
前端vue实现甘特图
m0_74823827的博客
12-11 1374
甘特图(Gantt chart)又称为横道图、条状图(Bar chart)。以提出者亨利·L·甘特先生的名字命名，是项目管理、生产排程、节点管理中非常常见的一个功能。甘特图内在思想简单，即以图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间。基本是一条线条图，横轴表示时间，纵轴表示活动(项目)，线条表示在整个期间上计划和实际的活动完成情况。它直观地表明任务计划在什么时候进行，及实际进展与计划要求的对比。管理者由此可便利地弄清一项任务(项目)还剩下哪些工作要做，并可评估工作进度。
vue-ganttastic:Vue.js的简单易用的甘特图组件
05-28
Vue-ganttastic Vue.js的简单易用的甘特图组件 主页 安装 您可以使用npm在项目中安装和使用Vue-Ganttastic： npm install vue-ganttastic 是Vue-Ganttastic的对等依赖项。 为了使Vue-Ganttastic正常工作，您需要在项目中安装它： npm install moment 基本用法 导入组件GGanttChart和GGanttRow 。 在模板中使用g-gantt-chart ，将所需的图表开始和图表结束时间传递为​​props（ chart-start和chart-end ），然后将g-gantt-row添加到默认模板槽。 使用bars props将包含bar对象的数组传递到每一行，同时使用props bar-start和bar-end在bar对象中指定代表bar开始和bar结束时间的属性的名称。 有
vue3+dhtmlx 甘特图真是案例
最新发布
Passerby_K的博客
04-23 499
dhtmlx-gantt案例。支持拖拽，选择人员，优先级，开发状态，进度。
vue甘特图插件（应用于项目进度、流程进度等）
lys20000913的博客
12-15 6130
vue甘特图插件 表格流程展示
vue使用甘特图插件dhtmlx-gantt（ 简单版）
热门推荐
MELANCHOLY ❤ ◁ ❚❚ ▷
08-25 1万+
甘特图 dhtmlx-gantt
开源的甘特图插件
11-27
基于jQuery 3.2 MIT许可：您可以在任何地方重复使用， JSON导入导出，国际化 、管理任务状态 - >项目工作流程 、管理依赖项、管理任务（资源，角色工作）、服务器同步就绪、完全撤消 - 重做支持、跨浏览器（至少对于最新版本）、键盘编辑支持、SVG可视化编辑器/打印友好、可折叠的分支机构、关键路径、里程碑、进步等 、缩放
一文搞定dhtmlx-gantt调度界面，vue下使用dhtmlxgantt进行项目甘特图模块设计开发（前端界面显示篇（1））
weixin_44979308的博客
03-17 7753
(1) dhtmlxgantt是进行甘特图开发过程中所用到的插件库，用于跨浏览器和跨平台应用程序的功能较为齐全的Gantt图表。其祖家组件为一个JavaScript库，提供了一套完整的Ajax驱动的UI组件。其中支持文本字样可编辑、日期点击弹出日历可选择日期、不同任务选择不同颜色，自动显示进度，进度条总工期和当下进展用深浅色显示。本文基于在较为成熟完整的项目，进行甘特图模块开发的内容。（2）引用font-awesome.min.css图标,为了显示各种图表插件。(3)关于css样式渲染甘特图界面。
13个js版gantt甘特图控件集合
01-15
在本资源包中，你将找到13个不同的JS版本Gantt甘特图控件，它们可以帮助开发者轻松地在Web应用中实现甘特图功能。 1. **DHTMLX Gantt**：这是一个强大的JavaScript组件，提供了丰富的API和灵活的配置选项，支持...
MZGantt甘特图插件（原生js插件）
03-13
MZGantt是一款原生js开发的甘特图插件。支持vue，ts，js等，支持流行的各种前端框架，可以快速引用到您的web程序或者移动应用中。 版本号:2024.3.1 官网:mzgantt.tecjt.com
一起来了解React的四种优秀甘特图方案（下篇）
weixin_44542399的博客
04-08 4690
接上篇！！！ 3. DHTMLX Gantt(https://dhtmlx.com/docs/products/dhtmlxGantt/) 作为一款功能齐全的甘特图工具，DHTMLX Gantt能够实现跨浏览器和平台的应用。它能够完全自定义各种图表，其灵活的API也能够方便每个元素的配置。您可以自定义从任务栏到网格结构的所有内容。使用其缩放功能，以及在月、日和小时之间灵活的切换，您可以更专注于...
甘特图控件
10-14
一款甘特图控件，项目任务展示，标识任务状态及进度,支持.net
可拖拽的甘特图控件（完整）
08-18
前段时间发布这个控件的时候，忘了将所需的DCU文件一起打包。网友lloovve下载后发现了这个问题，并在评论中指出了这个问题，先对lloovve表示感谢！现在重新发布一次。 DELPH7开发的控件，实现可拖拽的甘特图功能。以表格和任务滑块的组合实现甘特图的外观效果，可拖动或伸缩任务滑块，实现动态、可视化地调整任务的时间属性。欢迎有相关需求的朋友下载试用。 安装方法：解压得到控件的bpl文件和dcus文件夹，运行DELPHI7，选择"Component"->"Install Packages"，点击"Add"按钮，选择解压得到的bpl文件进行安装。完成后，控件件面板的末尾将多出一个控件页"SchedGrid"。 在使用该控件的工程属性中设置"search path"为解压得到的dcus文件夹所在路径。
QtGantt:甘特图控件
05-18
QtGantt QML 封装百度eCharts 的甘特图
最新甘特图控件
06-20
*********************************************************************最新更新： 1、提高了拖拉的速度。不会出现闪烁。 2、同工艺之间可以换机台加工，同工艺机台用同一种颜色来显示。 3、可以显示完成度。********************************************************************该甘特图控件纯属个人开发，使用DELPHI开发。1、该控件主要用于生产排程或计划用。2、该甘特图可以自由拖拉更改时间，时间轴可以自由缩放，显示不同的界面效果。3、可以自由设置3D、更改甘特图大小，是否让用户移动甘特图等效果属性设置。 gant3d,gantchanged,gantmoved这三个属性来控制。4、该甘特图不用设置颜色，会随机获取颜色，并把相同模号的颜色设置为一样。 当用鼠标点击一个零件时，该套模所有的零件都会变成红色，这个颜色是唯一的， 方便用户查看该模的进度。5、该甘特图开发周期短，不可避免有很多不如意的地方希望大家提出宝贵的意见。6、该甘特图是本人研究成果，暂时只能给出试用版出来。demo里显示的数据是几种工序的机台信息，大家可以用排程软件给这些工序排程来测试效果。排程软件的 用户名是admin,密码是1，登陆后就可以进行排程操作。大家可以进入我的空间下载最新的甘特图控件！http://cxing1985.ys168.com/作者：星火燎燃QQ：251276845 手机：13632994209E-mail:cxing1985@126.com.
基于vue的甘特图，可上下拖拽
05-14
基于vue实现甘特图实现上下拖拽，达到排班的要求，之前困于没有好的方案，在我研究两周后最终实现甘特图的拖拽效果
vue中利用dhtmlx-gantt实现甘特图
zh626678的博客
02-29 4359
在vue中使用dhtmlxGantt实现甘特图
vue2实现甘特图
油墨香^-^的博客
04-10 7135
(1)直接引入dhtmlx甘特实现的图表操作描述全是英文的，所以要对现有的属性数据显示要进行汉化文字代替。使用需要很多配置项，在原生版进行详情介绍，vue版只做基本使用。以上内容只是部分收费内容，并非全部收费内容。收费的甘特图功能一般在这放开。自定义修改gantt样式文件。弹窗表单----见汉化图例。local---本地汉化。gantt加载数据格式。gantt功能插件挂载。
Vue2中后台使用dhtmlx-gantt插件实现复杂甘特图
shehuirencxz的博客
02-13 6317
Vue2中后台项目引入dhtmlx-gantt插件实现复杂甘特图
vue3高性能甘特图插件
04-11
### 高性能 Vue3 甘特图插件推荐 对于 Vue3 的高性能甘特图插件，可以考虑 **Bryntum Gantt** 和其他类似的解决方案。以下是详细的分析： #### Bryntum Gantt 插件 Bryntum Gantt 是一款专为现代前端框架设计的超快速且高度可定制化的甘特图组件套件[^1]。它支持多种主流框架，包括 React、Angular、Vue 和纯 JavaScript 应用程序。其主要特点如下： - 支持 Vue3 并提供官方文档指导如何集成到项目中。 - 提供高效的渲染机制，能够处理大量数据而不会显著降低性能。 - 可通过配置实现完全自定义的功能和样式。 尽管 Bryntum Gantt 功能强大，但也存在一些已知问题，在特定场景下可能需要修复或调整设置。例如： - 垂直重新排列任务时可能出现错误显示（已在最新版本中修复）[^2]。 - 时间轴和网格大小在某些布局下的适配问题也得到了改进。 如果计划长期使用并希望获得技术支持，则需注意该工具属于商业软件范畴，具体定价可通过官网查询。 #### 替代方案对比 除了 Bryntum Gantt 外，还有其他开源或付费选项可供评估： 1. **DHTMLX Gantt**: 这是一款流行的跨平台甘特图表库，兼容 Vue3，并具备良好的社区反馈和支持。 ```javascript import { DhtmlxGantt } from 'dhtmlx-gantt-vue'; export default { components: { DhtmlxGantt, }, mounted() { this.$gantt.init(this.$refs.gantt); } }; ``` 2. **AnyChart**: AnyChart 提供了一个轻量级但灵活的甘特图模块，适合中小型应用需求。不过它的交互性和复杂度相对较低。 3. **Kendo UI for Vue (Progress)**: Progress Kendo UI 包含一套完整的可视化控件集，其中就包含了针对 Vue 开发者的高级甘特图特性。然而这同样是一个收费产品线。 综上所述，基于当前描述的需求——即寻找适用于 Vue3 的高效能甘特图插件——建议优先测试 Bryntum Gantt 或者 DHTMLX Gantt 来满足实际开发中的各种挑战性要求[^1][^2]。 ```python def evaluate_gantt_plugins(): plugins = ["Bryntum Gantt", "DHTMLX Gantt", "AnyChart"] features_to_check = [ ("Performance under large datasets", True), ("Customizability level", False), ("Supports Vue3 natively?", None)] evaluation_results = {} for plugin in plugins: result = [] for feature, value in features_to_check.items(): if isinstance(value,bool): outcome="Pass"if random.random()>0.5 else"Fail" elif not value: outcome=str(random.randint(1,10))+"/10" else: outcome=random.choice(["Yes","No"]) result.append((feature,outcome)) evaluation_results[plugin]=result return evaluation_results ``` 问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值