前端甘特图组件开发(二)
自定义时间轴功能
由于常见的甘特图时间轴只支持按照天/周/月/年或者固定的时间单位进行划分,但实际使用场景下有时候会需要按照特定且不规则的时间段对进度数据进行直观划分。因此本组件在原时间轴的基础上添加新的自定义时间轴,可通过数据配置自定义时间段及其标题,具体内容如下。
// 自定义时间轴数据
export const customisedList: Array<any> = [{ title: '版本1.0', startDate: '2022/9/7', endDate: '2022/9/15' },{ title: '版本1.1', startDate: '2022/9/15', endDate: '2022/9/24' },{ title: '版本2.0', startDate: '2022/9/24', endDate: '2022/9/30' },{ title: '版本2.1', startDate: '2022/9/30', endDate: '2022/10/5' },{ title: '版本2.2', startDate: '2022/10/5', endDate: '2022/10/13' },
]
<!-- 自定义时间轴 -->
<svg [attr.width]="dateConfig.svgWidth" [attr.height]="timeLineHeight"><g *ngFor="let item of dateConfig.customisedList; let i = index;"><rect [attr.x]="item.start * squareWidth" [attr.y]="0" [attr.width]="item.length * squareWidth"[attr.height]="timeLineHeight" [attr.fill]="i % 2 === 0 ? '#ddd' : '#eee'"></rect><text [attr.x]="(item.start + item.length / 2) * squareWidth - 12" [attr.y]="timeLineHeight / 2 + 4"style="font-size: 12px;">{{item.title}}</text></g>
</svg>
// 配置自定义时间轴
private setCustomisedData(): void {customisedList.forEach(item => {const start = (new Date(item.startDate).getTime() - this.dateConfig.startDate.getTime()) / (24 * 60 * 60 * 1000);const length = (new Date(item.endDate).getTime() - new Date(item.startDate).getTime()) / (24 * 60 * 60 * 1000);this.dateConfig.customisedList.push({title: item.title,start,length})})
}
数据交互处理逻辑预留
本甘特图涉及数据的增删改查功能。其中具体的新增、编辑、删除均通过弹窗形式操作,本组件进行预留,此处仅提供点击事件。
① 添加新增按钮列,放置 + 符号
② 为 + 符号绑定单击事件(创建)
③ 为表格行添加双击事件(编辑)
④ 通过 Angular EventEmitter 将事件触发的方法暴露给调用的父组件
注意:双击事件需要特殊处理,以避免重复触发单击事件
// 7. 点击任务自动滚动(单击)
private time: number = 200;
private timeout: any = null;
public scrollToBar(row: any): void {clearTimeout(this.timeout); // 清除第一个单击事件this.timeout = setTimeout(() => {// 单击事件}, this.time)
}
// 8. 创建/编辑任务(双击)
@Output() createTask = new EventEmitter();
@Output() createSubTask = new EventEmitter();
@Output() editTask = new EventEmitter();
public editRow(row: any = null, isCreate: boolean = false): void {clearTimeout(this.timeout);if (isCreate) {// 创建数据处理if (row) {// 创建二级数据this.createSubTask.emit(row);} else {// 创建一级数据this.createTask.emit(row);}} else {// 双击编辑数据处理this.editTask.emit(row);}
}
调用该组件时,定义并传入几个点击事件触发的内容即可。
<app-m-gantt (createSubTask)="createSubTask($event)" (createTask)="createTask($event)"(editTask)="editTask($event)">
</app-m-gantt>
// 需要自定义的样式(仅传入需要更改的属性)
public styleOptions = {containerWidth: '1600px',
}
// 几个事件触发的函数
public createTask(e: any): void {console.log('创建一级数据');
}
public createSubTask(e: any): void {console.log('创建二级数据', e);
}
public editTask(e: any): void {console.log('编辑数据', e);
}
样式布局调整&样式可配置化
- 样式布局调整
① 时间轴高度从表格高度获取
ngAfterViewInit(): void {// 根据表格高度设置进度条行高this.lineHeight = document.querySelectorAll('.row')[0].clientHeight;
}
② 表格高度调整
由于表格 td 天然具有 padding: 1px,故需要将其取消,防止表格行高不一致,造成与右侧甘特图行数据无法对齐的问题。
- 样式可配置化
① 将部分样式(例如进度条颜色、高度、表格高度等)进行整合,统一在ts文件中控制。
② 使用 Angular 的 @Input 接收调用本组件的父组件传入的样式值进行部分替换,达到自定义的效果。
// 自定义样式(父组件传入)
@Input() options: any;
// 1. 可定义变量
public containerWidth: string = '1500px'; // 容器宽度
// ....ngOnInit(): void {this.preprocessStyles(this.options);// ...
}
private preprocessStyles(styles: any): void {this.containerWidth = styles.containerWidth || this.containerWidth;// ...
}
调用该组件时传入即可
<app-m-gantt [options]="styleOptions"></app-m-gantt>
- 可配置样式列表
public containerWidth: string = '1500px'; // 1.容器宽度
public containerHeight: string = 'auto'; // 2.容器高度
public lineHeight: number = 43; // 3.行高
public timeLineHeight: number = 30; // 4.时间轴高度(单层)
public squareWidth: number = 40; // 5.格子宽度
public barHeight: number = 24; // 6.进度条高度
public headHeight: number = 90; // 7.头部整体高度
public progressBarColor: string = '#1e80ff'; // 8.进度颜色
public barColor: string = '#91beff'; // 9.进度条颜色
public subBarColor: string = '#e6a23c'; // 10.子进度颜色
public subProgressBarColor: string = '#f56c6c'; // 11.子进度条颜色
public barFontColor: string = '#fff'; // 12.进度条文字颜色
数据传入&&配置
使用 @Input 接收父组件传入的数据及配置项
- 数据格式
// 任务数据
public data: Array<any> = [{ id: '0', name: '任务1', startDate: '2022/9/10', endDate: '2022/9/20', status: '进行中', duration: 10, progress: 0.6 },{ id: '01', name: '子任务1', startDate: '2022/9/10', endDate: '2022/9/15', status: '进行中', duration: 5, progress: 0.9, parentId: '0' },...
]
// 自定义时间轴数据
public customisedList: Array<any> = [{ title: '版本1.0', startDate: '2022/9/7', endDate: '2022/9/15' },{ title: '版本1.1', startDate: '2022/9/15', endDate: '2022/9/24' },...
]
- 数据预处理
传入的数据由于有父子级关系,需提前增加部分属性。说明:- open:是否展开下属子项
- show:是否需要显示该项
- config.openSub:是否在初始化时展开所有子项
// 有下属子项的父项集合
const parents: Array<any> = [];
// 展开子项
if (this.config.openSub) {data.forEach(row => {row.show = true;if (!row.parentId) {if (parents.indexOf(row.id) !== -1) {row.open = true} else {row.open = false}}})
} else {// 收起子项data.forEach(row => {if (!row.parentId) {row.open = false;row.show = true;} else {row.show = false;}})
}
其他
部分样式、显示内容暂未实现可配置化,后面有时间会持续完善。
本组件的开发流程希望能提供一种开发各类图表的思路,后续有类似的需求可以参考此思路进行高效开发。
【项目GitHub地址】⭐️
原文地址
【个人博客】⭐️
相关文章
【前端甘特图组件开发(一)】
前端甘特图组件开发(二)相关推荐
- 前端甘特图组件开发(一)
背景 工作中需要在网页上实现甘特图,以展示进度数据.通过网上调研相关项目,找到一款 dhtmlx-gantt 组件,在低程度上满足项目需求,但在部分定制功能(如时间轴自定义.编辑弹窗样式风格等)并不能 ...
- vue 改变domclass_基于 vue 开发甘特图组件的心路历程(兼设计分享)
语雀原文 有更好的排版体验~ 这篇文章主要讲述笔者开发 v-gantt 甘特图组件的经过. 起源 公司项目有个甘特图的需求. 笔者考察了世面上 常见的甘特图组件 后,本着 我上我也行 的心态,以及考虑 ...
- Twproject Gantt – 开源的 JavaScript 甘特图组件
Twproject Gantt 是一款基于 jQuery 开发的甘特图组件,也可以创建其它图表,例如任务树(Task Trees).内置编辑.缩放和 CSS 皮肤等功能.更重要的是, 它是免费开源的. ...
- JQuery.Gantt(甘特图) 开发指南
概述 JQuery.Gantt是一个开源的基于JQuery库的用于实现甘特图效果的可扩展功能的JS组件库. 源码下载 http://download.csdn.net/detail/aaak ...
- 基于 Compose Canvas 的蛛网图组件开发
基于 Compose & Canvas 的蛛网图组件开发 1. 前言 2. 实现过程 2.1 准备工作 2.1.1创建Compose方法,确定参数 2.1.2 添加Canvas 2.1.3编写 ...
- 强大js web甘特图制作之甘特图组件和数据对象
引用CSS和JS 使用EdoGantt是一件简单轻松的事,首先我们在HTML页面内引用CSS和JS: <!--edo css--><link href="http://ww ...
- AnyGantt Flash甘特图组件免费下载及使用教程
原文来自龙博方案网http://www.fanganwang.com/product/1455转载请注明出处 AnyGantt是一个强大的,基于Flash的数据可视化解决方案.允许任何人利用有力的动画 ...
- JavaScript多功能甘特图组件 - jsGantt
jsGantt 是一个可定制的.灵活的.多语言的甘特图组件,由原生 JavaScript 构建.它使用客户端渲染以获得快速的性能和动态的交互性.非常适用于任何需要交互式时间线或时间表显示的项目. 更多 ...
- 记一次 React 开源甘特图组件的性能优化,已合入 PR!
背景 公司项目最近用到甘特图功能,于是集成了一款开源的甘特图插件. 甘特图的主要作用是项目管理,可以用图示的方式通过活动列表和时间刻度形象地表示出任何特定项目的活动顺序与持续时间,如下图 image. ...
最新文章
- 功能测试怎么学?阿里测试工程师教你4个步骤
- Python爬虫(二)_urllib2的使用
- crashdumpandroid_Android 中Crash时如何获取异常信息详解及实例
- 删除 Mac AppStore 正在下载的应用
- class传参 python_Python类的概念、定义、属性、继承
- FreeRTOS任务优先级
- html模仿抖音,仿抖音示例
- WS2811单线传输三通道LED驱动控制专用芯片
- 数字图像处理基础知-色度空间(RGB\CMY\CMYK\HSI的详细解释和一些关联性描述)
- NetLimiter(网络限速-对付流氓上传)
- 实验二 贪吃蛇游戏的开发
- JS之 获取日期方法
- w ndows7安不上HP1020,Win7安装hp1020打印机后无法使用怎么办(图文)
- java socket 卡住_Java socket通讯实现过程及问题解决
- 反向放大器为何要使用同相增益(也称作噪声增益),来计算带宽
- 【Python-数据结构】——线性结构
- 360桌面助手待办事项同步/迁移的方法(从一台电脑迁移到另外一台电脑上)
- 百度鹰眼服务安卓端示例工程使用流程
- Python将两个列表合并为一个字典
- GCT考试之考试结果
热门文章
- 企业安全级世界杯,红芯助你捧得大力神杯
- IPv6 RA Guard
- 电脑充电器,笔记本充电器都见过,但这些猫腻我不说你知道吗
- html设置表单禁止修改群名片,怎样设置微信别人不能修改群名
- Dynamic Quantization PyTorch官方教程学习笔记
- 腾讯云服务器好不好?腾讯云服务器测评
- windows版 nginx配置反向代理实例教程 跳转tomcat和php网站
- win8计算机管理没本地用户和组,win7系统服务器管理器没有本地用户和组选项怎么办?...
- 4.3 设计一个完善的响应式系统
- [codeforces 1327E] Count The Blocks 打表找规律+根据规律找公式+优化公式