自己开发的 Vue 下的甘特图 组件 已上传到GitHub上

置顶 已于 2022-04-05 21:33:59 修改
阅读量2.1k 收藏 7
点赞数 7
分类专栏： Vue 文章标签： vue.js github 前端
于 2022-03-06 21:18:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lee576/article/details/123317411
版权

经过 2021年的一个春节，从年前到现在，大致撸出一个 甘特图，进度条是用SVG画的，使用了几个工具库 （interactjs 用来处理拖拽和修改尺寸，snap.svg 用来处理 svg 的dom 操作，moment.js用来处理时间的操作），其他没有依赖任何的UI组件，目前初见雏形，还比较粗糙，后面会不断更新

 源码地址 点击

期间也摸索了怎么把vs code的项目上传到 GitHub 上面进行源代码的管理，基本上是参考的 这篇文章 做的

lee576
关注
专栏目录
【前端】甘特图或日历图
hjh_cos
12-01 478
Vue3使用甘特图以及日历图
甘特图在Vue中的应用篇
飞翔的小白
01-11 1万+
1、首先安装插件，由于官网上一些功能是收费的，所以我在github上发现一款还不错的插件，并有文档说明（全英） npm i gantt-schedule-timeline-calendar 附上文档地址：https://gantt-schedule-timeline-calendar.neuronet.io/documentation/getting-started Git项目地址：https://github.com/neuronetio/gantt-schedule-timeline-calen
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结束时间的属性的名称。 有
vue使用甘特图插件dhtmlx-gantt（ 简单版）
热门推荐
MELANCHOLY ❤ ◁ ❚❚ ▷
08-25 1万+
甘特图 dhtmlx-gantt
XGantt：基于Vue3的高性能甘特图组件
gitblog_00991的博客
09-14 362
XGantt：基于Vue3的高性能甘特图组件 gantt An easy-to-use Gantt component. 持续更新，中文文档 项目地址: https://gitcode.com/gh_mirrors/gantt/g...
Vue3项目使用甘特图技术（vue-ganttastic）
JarryNeverGiveup的博客
01-05 8612
一个具备拖拽、行内多个bar、调整bar大小、调整画布的时间轴精度功能的甘特图插件
Vue项目的甘特图组件：dhtmlx-gantt使用教程和实现效果展示
最新发布
Yy55gc25112的博客
10-12 907
公司的甘特图需求，研究了几个组件后，选择使用 dhtmlx-gantt 进行实现，dhtmlx-gantt使用其实是偏简单的，文档虽然是英文，但配合翻译也是可以看懂的，下面将公司需求的代码实现粘贴出来，并简单介绍一下使用方法，希望对你有帮助。下面讲一下 dhtmlx-gantt 的一些配置项，也可以说是我用到的配置项，更多的就要参考官方文档了。需求是不需要bar连线的，所以将bar连线注释掉了，连线也是可以有的。如果你的页面能展示出来基本样式，那么就成功啦，咱们继续下一步。然后在css内定义样式就好啦。
vue 改变domclass_基于 vue 开发甘特图组件的心路历程（兼设计分享）
weixin_39631572的博客
10-22 661
语雀原文 有更好的排版体验~这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过。起源公司项目有个甘特图的需求。笔者考察了世面上 常见的甘特图组件 后，本着 我上我也行 的心态，以及考虑之前拓展其他开源组件时的痛苦体验，决定自研。一番设计后，就开始动工了。设计布局拆解首先对目标界面进行拆解。可以看到甘特图组件是由 左侧可折叠的树 & 右侧条状图 两部分组成的。滚动方面， 头部日期 h...
甘特弹性：甘特图[javascript甘特图，甘特组件，vue甘特图，vue甘特图，响应式甘特图，项目经理，vue项目]
02-04
甘特弹性-Javascript甘特图（可编辑，响应式） 适用于vue，jquery，vanilla js和其他框架的Javascript Gantt Chart 项目已作为下一个主要版本移至 甘特弹性 是vue组件，但可以在其他框架中使用，甚至可以与jQuery...
一个基于vue和element-ui的甘特图组件，gantt、项目管理。
qq_15390381的博客
11-26 6588
# wl-gantt # 简介 目前市面上最有名的几个gantt插件占据江湖了非常久远的时间，它们古老又强大。 但无一例外的是：它们收费或极其难用并且依赖非常古老的技术，其中有些技术现在入行的新手甚至从未听闻。 【jQueryGantt】【plusgantt】【dhtmlx】 不可否认它们都非常的强大，不管是从性能还是功能性。但是大多的业务需求并不需要如此庞然大...
vue 时间插件_基于 Vue+Gantt 构建甘特图组件
weixin_39785081的博客
12-09 3931
昨天给大家推荐了一款H5甘特图插件dhtmlxGantt。今天给大家分享如何在Vue项目中实现甘特图插件。基于dhtmlx-gantt插件来实现在vue.js项目中创建甘特图。安装依赖首先需要安装 dhtmlx-gantt 模块。$ npm i dhtmlx-gantt -S创建gantt.vue新建gantt.vue页面，并加入以下代码。export default { name: 'app'...
开源的甘特图插件
11-27
基于jQuery 3.2 MIT许可：您可以在任何地方重复使用， JSON导入导出，国际化 、管理任务状态 - >项目工作流程 、管理依赖项、管理任务（资源，角色工作）、服务器同步就绪、完全撤消 - 重做支持、跨浏览器（至少对于最新版本）、键盘编辑支持、SVG可视化编辑器/打印友好、可折叠的分支机构、关键路径、里程碑、进步等 、缩放
gh-gantt：GitHub发布gantt图表生成器
02-05
项目状态：在可预见的将来开发暂停 所有利益相关者（包括我在内）都不再需要ZenHub的甘特图。 从ZenHub检索问题详细信息方面已经取得了进展，并且可以创建一个基本的甘特图。 但是，没有实施关键的路径查找逻辑。 如果您对继续进行分叉开发感兴趣，并想提出有关现有代码库的问题，请随时提出问题。 GitHub甘特 GitHub发布甘特图生成器。 目录 总览 GH Gantt以gantt图表形式显示GitHub问题。 ZenHub用于通过其他信息来增加GitHub问题。 有关设计信息，请参见 。
vue3 手写表格甘特图公用组件
jiyuchengzhou的博客
11-30 2510
如何用vue3+html+css 实现一个甘特图
超详细的vue3+ts+dhtmlx甘特图免费版组件使用方法,支持事件内自定义和样式修改
PhoenixGuangyu的博客
10-23 5199
这个组件比较古老，对vue的兼容性很不友好。2.创建Gantt.vue 组件。1.安装dhtmlx 甘特图。
推荐开源项目：Vue-Gantt - 灵活高效的Gantt图表组件
gitblog_00056的博客
04-07 590
推荐开源项目：Vue-Gantt - 灵活高效的Gantt图表组件 去发现同类优质开源项目:https://gitcode.com/ 是一个基于 Vue.js 的轻量级但功能强大的Gantt图表组件，旨在帮助开发者轻松地在web应用中实现任务管理、项目进度可视化和时间线布局。该项目以其简洁的API、高度可定制性及出色的性能，吸引了众多开发者的关注。 项目概述 Vue-Gantt提供了一种直观的方式...
手撸了一个基于Vue的Gantt组件
一只小鹰
09-04 1607
原文地址： https://www.jeremyjone.com/718/，转载请注明。 基于Vue的Gantt组件 工作需要，要实现甘特图，之前实现了一版，但是有些问题，干脆撸一个单独的组件出来，打包封装直接使用，这样也更加灵活。 虽然不比专业的，但是小功能足够用了，展示，拖动，后续可能会添加新功能。 话不多说，直接上图。 功能 树形数据结构展示，支持动态增减 自定义左侧表格的列内容 自定义右侧甘特条的内容 任意拖动甘特条以修改时间 更多功能，可以查看文档。 使用 组件已经发布到 npm，使用 n
基于Vue的gannt（甘特图）组件
wth905541529的博客
11-09 3790
gannt组件演示 gitee 地址 https://gitee.com/TianhaoWang1996/gannt-self.git npm 安装 npm i gannt-self -S 引用 import ganntSelf from "gannt-self"; 属性 参数 说明 类型 可选值 默认值 taskList 数据源 ，具体见下表 array [ ...
vue中利用dhtmlx-gantt实现甘特图
zh626678的博客
02-29 3264
在vue中使用dhtmlxGantt实现甘特图
vue3甘特图组件汇总
04-24
在Vue3中，甘特图组件是一种常用的UI组件，用于展示项目进度和任务的时间轴。以下是一些常见的Vue3甘特图组件： 1. Vue Gantt Chart：这是一个功能强大的Vue3甘特图组件，它提供了丰富的配置选项和交互功能，可以...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值