Hinzufügen einer zweiten Skala(n)

Um Aufgaben gleichzeitig in verschiedenen Zeiteinheiten anzuzeigen, können Sie mehrere zusätzliche Skalen unterhalb der Standardskala hinzufügen.

Die zusätzlichen Skalen werden über die Eigenschaft subscales konfiguriert:

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

Sie können verschiedene Aspekte einer sekundären Skala anpassen:

• unit
• step
• format
• style

Festlegen der Einheit der Skala

Um die Einheit für die zweite Skala festzulegen, verwenden Sie das unit-Attribut innerhalb der Eigenschaft subscales:

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

Related sample:  Multiple scales

Festlegen des Schritts der Skala

Um das Schrittintervall für die zweite Skala zu definieren, verwenden Sie das step-Attribut in der Eigenschaft subscales:

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

Related sample:  Multiple scales

Festlegen des Formats der Skala

Um das Format der zweiten Skala zu konfigurieren, können Sie Folgendes verwenden:

• Das date-Attribut, um ein einfaches Zeichenfolgenformat anzugeben:

gantt.config.subscales = [
    {unit:"week", step:1, date:"%W"}
];

• Das template-Attribut, um ein komplexeres Format mit einer Funktion zu definieren, die ein Date-Objekt erhält:

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

Festlegen des Stils der Skala

Um benutzerdefinierte Stile auf die zweite Skala anzuwenden, verwenden Sie das css-Attribut in der Eigenschaft subscales:

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

Related sample:  Multiple scales

Zurück nach oben