Deprecated

此功能自 6.2 版本起已废弃。请使用 scales 配置来定义多重时间刻度。查看详情

添加第二时间刻度

为了同时以不同的时间单位展示任务,您可以在默认刻度下方添加多个附加刻度。

附加刻度通过 subscales 属性进行配置:

gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F, %Y";
 
 
gantt.config.subscales = [
    {unit:"week", step:1, date:"%W"},
    {unit:"day", step:1, date:"%D" }
];

您可以自定义次级刻度的多个方面:

设置刻度的单位

要为第二个刻度指定单位,请在 subscales 属性中使用 unit 属性:

gantt.config.subscales = [
    {unit:"month", date:"%F, %Y" }
];

Related sample:  Multiple scales

设置刻度的步长

要定义第二个刻度的步长间隔,请在 subscales 属性中使用 step 属性:

gantt.config.subscales = [
    {unit:"month", step:1, date:"%F, %Y" }
];

Related sample:  Multiple scales

设置刻度的格式

要配置第二个刻度的显示格式,您可以使用:

  • date 属性,提供简单的字符串格式:
gantt.config.subscales = [
    {unit:"week", step:1, date:"%W"}
];
  • template 属性,定义更复杂的格式,使用一个接收日期对象的函数:
gantt.config.subscales = [
    {unit:"week", step:1, template:weekScaleTemplate}
];
 
var weekScaleTemplate = function(date){
        var dateToStr = gantt.date.date_to_str("%d %M");
        var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
        return dateToStr(date) + " - " + dateToStr(endDate);
    };

Related sample:  Multiple scales

关于可用的格式字符,请参考 日期格式规范 文章

设置刻度的样式

要为第二个刻度应用自定义样式,请在 subscales 属性中使用 css 属性:

<style type="text/css">
.weekend{
    background: #F0DFE5 !important;
}
</style>
var daysStyle = function(date){
    var dateToStr = gantt.date.date_to_str("%D");
    if (dateToStr(date) == "Sun"||dateToStr(date) == "Sat")  return "weekend";
 
    return "";
};
 
gantt.config.subscales = [
    {unit:"day", date:"%D", css:daysStyle }
];

在 CSS 属性中包含 !important 关键字有助于确保样式被正确应用。

Related sample:  Multiple scales

Back to top