DHTMLX Gantt 甘特图自定义样式

最新推荐文章于 2024-07-25 14:22:44 发布

原创最新推荐文章于 2024-07-25 14:22:44 发布 · 6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css3

前端专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用CSS定制甘特图的任务线、里程碑、选中列背景色等样式，并通过JS配置行高、表头高度及滚动条宽度，实现甘特图的个性化展示。

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;
  }