CSS:
/* 任务线 */
.gantt_task_line{
height: 16px !important;
line-height: 16px !important;
margin-top: 8px;
border: none !important;
}
/* 里程碑 */
.gantt_task_line.gantt_milestone{
width: 30px !important;
height: 30px !important;
border: none !important;
background-color: inherit !important;
background-size: cover;
}
/* 里程碑icon */
.gantt_task_line.gantt_milestone .gantt_task_content{
margin-top: -8px;
transform: rotate(0deg) !important;
background-image: url('iconURL') !important;
}
/* 左侧悬浮单元格背景色 */
.gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover{background-color: aquamarine !important;}
/* 选中一列背景色 */
.gantt_grid_data .gantt_row.gantt_selected, .gantt_grid_data .gantt_row.odd.gantt_selected, .gantt_task_row.gantt_selected{background-color: aquamarine !important;}
/* 选中一列每个单元格右border颜色 */
.gantt_task_row.gantt_selected .gantt_task_cell{border-right-color: aquamarine !important;}
/* 任务名前的logo */
.gantt_tree_icon.gantt_file, .gantt_tree_icon.gantt_folder_open, .gantt_tree_icon.gantt_folder_closed{width: 10px; background-image: none;}
.gantt_tree_content{overflow: hidden;text-overflow: ellipsis;}
/* 标记线 */
.gantt_marker{background-color: brown;opacity: .4;}
js配置:
// 4.1 甘特图的行高
gantt.config.row_height = 30;
// 4.2 甘特图的表头高度
gantt.config.scale_height = 40;
// 4.3 设置滚动条宽/高度
gantt.config.scroll_size = 10;
滚动条样式:
/*滚动条整体样式*/
.gantt-wrapper ::-webkit-scrollbar {
width: 14px; /*宽分别对应竖滚动条的尺寸*/
height: 6px; /*高分别对应横滚动条的尺寸*/
}
/*滚动条里面轨道*/
.gantt-wrapper ::-webkit-scrollbar-track {
background-color: rgba(0,0,0,.2);
}
/*滚动条里面拖动条*/
.gantt-wrapper ::-webkit-scrollbar-thumb {
background-color: rgba(0,0,0,.5);
border-radius: 5px;
}