CSS 样式文档

使用自定义颜色覆盖甘特图元素的默认颜色设置的方法。用于设置甘特图以下部分样式的主要类选择器和模板：网格区域、时间轴区域、资源面板。

任务栏网格

用于设置网格区域主要元素样式的 CSS 选择器。 网格的 DOM 元素的整体结构如下：

- .gantt_grid
    - .gantt_grid_scale
        - .gantt_grid_head_cell
    - .gantt_grid_data
        - .gantt_row.odd 
        - .gantt_row 
        - .gantt_row.gantt_row_task
        - .gantt_row.gantt_row_project
        - .gantt_row.gantt_row_milestone
            - .gantt_cell.gantt_cell_tree
                - .gantt_tree_indent
                - .gantt_tree_icon.gantt_close
                - .gantt_tree_icon.gantt_open
                - .gantt_tree_content
           - .gantt_cell
                - .gantt_tree_content

网格标题

通过 .gantt_grid_scale 类选择器更改 Grid 标头元素的样式。 下面是为网格和时间轴的标题应用常见背景和字体颜色的示例：

.gantt_grid_scale, .gantt_task_scale, .gantt_task_vscroll {
    background-color: #eee;
}
.gantt_grid_scale, .gantt_task_scale, 
.gantt_task .gantt_task_scale .gantt_scale_cell,
.gantt_grid_scale .gantt_grid_head_cell {
    color: #000;
    font-size: 12px;
    border-bottom: 1px solid #cecece;
}

每隔一行

要为网格的每隔一行着色，您需要为 .gantt_row.odd 选择器指定 CSS 样式，例如：

.gantt_row.odd{
    background-color:#f4f4fb;
}

所选行

可以在 .gantt_row.gantt_selected 选择器的帮助下设置网格中所选行的样式：

.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
    background-color: #fff3a1;
}

任务行、项目行和里程碑

要设置任务、项目或里程碑行的样式，请使用以下选择器：

• .gantt_row.gantt_row_task
• .gantt_row.gantt_row_project
• .gantt_row.gantt_row_milestone

.gantt_row.gantt_row_project{
   background-color:#fafafa;
   font-weight: bold;
}

时间轴样式

时间轴区域的 DOM 元素的整体结构如下所示：

- .gantt_task
    - .gantt_task_scale
        - .gantt_scale_line
            - .gantt_scale_cell
    - .gantt_data_area
        - .gantt_task_bg
            - .gantt_task_row
            - .gantt_task_row.odd
                - .gantt_task_cell
        - .gantt_links_area
            - .gantt_task_link
        - .gantt_bars_area
            - .gantt_task_line 
                - .gantt_task_progress_wrapper 
                    - .gantt_task_progress 
                - .gantt_task_progress_drag 
                - .gantt_task_content 
                - .gantt_task_drag.task_start_date 
                - .gantt_task_drag.task_end_date
                - .gantt_link_control.task_start_date
                - .gantt_link_control.task_end_date
                    - .gantt_link_point

时间刻度

时间刻度的 DOM 元素具有以下结构：

- .gantt_task_scale
    - .gantt_scale_line
        - .gantt_scale_cell

数据区域

数据区域的 DOM 元素具有以下结构：

- .gantt_data_area
    - .gantt_task_bg
        - .gantt_task_row
        - .gantt_task_row.odd
            - .gantt_task_cell
    - .gantt_links_area
        - .gantt_task_link
    - .gantt_bars_area
        - .gantt_task_line 
            - .gantt_task_progress_wrapper 
                - .gantt_task_progress 
            - .gantt_task_progress_drag 
            - .gantt_task_content 
            - .gantt_task_drag.task_start_date 
            - .gantt_task_drag.task_end_date
            - .gantt_link_control.task_start_date
            - .gantt_link_control.task_end_date
                - .gantt_link_point