VARCHART XGantt是一款功能強大的甘特圖控件，其模塊化的設計讓您可以創建滿足需要的應用程序。XGantt可用于.NET，ActiveX和ASP.NET應用程序，可以快速、簡單地集成到您的應用程序中，幫助您識別性能瓶頸、避免延遲以及高效利用資源，使復雜數據變得更加容易理解。

VARCHART XGantt在市場上已有近30年的歷史，它提供了最完善的C＃Gantt圖表控件，可用于構建現代而又可靠的行業資源調度應用程序。

點擊下載VARCHART XGantt正式版

對于每個計劃者來說，知道什么時候可用的資源是必不可少的信息。因此，在甘特圖中，工作時間和非工作時間的智能可視化是每個資源計劃和調度應用程序中的“必備條件”。在此博客文章中，我們將深入了解如何在HTML5甘特圖的可視計劃小部件（VSW）中使用日歷對象來可視化工作時間和非工作時間，并將討論如何指定和應用它們。我們還提供了許多技巧和竅門，以實現最佳的用戶互動，

視覺計劃小部件日歷對象的基礎

可視計劃窗口小部件中的日歷用于定義資源的一般可用性，而無需考慮特定容量。每個日歷對象都有一組日歷條目，這些日歷條目確定在開始日期和結束日期指定的時間段內它是工作時間還是非工作時間。

這是日歷的簡單定義，其中定義了兩個帶工作時間的時段（1月4日上午6點至中午12點以及下午2點至下午6點）：

widget.addCalendars([
   {
      ID: 'Calendar1',
      Entries: [
         {
            Start: new Date('2021-01-04T06:00:00'),
            End: new Date('2021-01-04T12:00:00')
         },
         {
            Start: new Date('2021-01-04T14:00:00'),
            End: new Date('2021-01-04T18:00:00')
         }
      ]
   }
]);

widget.addCalendars([
   {
      ID: 'Calendar1',
      Entries: [
         {
            Start: new Date('2021-01-04T06:00:00'),
            End: new Date('2021-01-04T18:00:00'),
            TimeType: netronic.nVSW.TimeType.WorkingTime
         },
         {
            Start: new Date('2021-01-04T12:00:00'),
            End: new Date('2021-01-04T14:00:00'),
            TimeType: netronic.nVSW.TimeType.NonWorkingTime
         }
      ]
   }
]);

甘特圖中日歷可視化的起點

只要不應用日歷，Visual Scheduling Widget的甘特圖就只能在非工作時間工作。這是出于安全考慮，因為它會迫使您定義和應用適當的日歷對象。

不使用日歷，甘特圖可能如下所示：

在這里，您可以在圖區域中看到帶有淺灰色背景的資源視圖。此灰色表示不工作時間。現在，我們可以使用“ defaultCalendarID”選項將日歷分配給可視化計劃小部件。

widget.option("defaultCalendarID", "Calendar1");

如下圖所示，灰色的背景現在被兩個白色的條紋打斷了，它們指示工作時間：

為了獲得充分的靈活性，每個資源當然可以分配自己的日歷。因此，您可以定義另一個日歷并將其分配給資源。此新日歷將覆蓋默認日歷的設置：

widget.addCalendars([
   {
      ID: 'Calendar2',
      Entries: [
         {
            Start: new Date('2021-01-04T04:00:00'),
            End: new Date('2021-01-04T20:00:00')
         }
      ]
   }
]);

widget.updateResources([
   {
      "ID": "R2",
      "TableText": "Resource 2",
      "PM_TableColor": "lightblue",
      "CalendarID": "Calendar2"
   }
]);

可視化的最佳實踐

首先，日歷信息可用于指示條形圖中的非工作時間。您可以讓窗口小部件根據常規條形顏色自動計算這些時間的顏色，或者可以顯式指定您選擇的顏色。

例如，讓我們看一下資源分配：

widget.addAllocations([
   {
      "ID": "All1",
      "ResourceID": R1
      "BarText": "Allocation",
      "PM_Color": "steelblue"
   }
]);

或者設置屬性 "PM_NonworkingTimeColor": "tomato"

使用日歷的另一個有趣方面是可以通過將窗口小部件選項“ nonWorkingTimeVisible”設置為false來可視地折疊非工作時間。這是減少顯示器在水平方向上占用空間的寶貴功能。這樣，您可以一目了然地概覽更長的時間，如以下比較所示。上圖顯示了一個圖表，其中所有非工作時間可見，而下圖則折疊了所有資源的所有非工作時間。在時間刻度內，缺失時間用雙線表示（請參見放大的摘錄）。

注意：如果資源沒有共享相同的非工作時間，事情會變得更加復雜。只有那些所有資源共有的非工作時間才能崩潰。在以下示例中，資源2的日歷可防止所有非工作時間都消失。為了清楚起見，可折疊時間以紅色陰影顯示：

用戶互動的最佳做法

日歷的另一個影響是，當用戶移動條時，日歷信息受到尊重。在這種情況下，在交互過程中顯示的幻像條會變長或變短，具體取決于該條是否經過了非工作時間。

活動視圖

在活動視圖中，日歷的處理方式與資源視圖相比有所不同（請在此處詳細了解這兩種不同的視圖）。在默認情況下，此處不顯示日歷網格。要在此視圖中顯示任何日歷網格，您必須將小部件選項“ pm_activityCalendarsEnabled”設置為true。然后，您將看到默認日歷以及分配給各個活動的日歷。

日歷和期間熒光筆之間的區別

最后，讓我說幾句有關熒光筆和日歷的區別。與日歷不同，時段熒光筆只是一個圖形元素，可讓您直觀地突出顯示某個時段。它對用戶交互完全沒有影響，并且在任何計算過程中都沒有考慮。

與Visual Scheduling Widget的所有對象類型一樣，您可以簡單地通過使用相應的add方法來添加周期熒光筆對象：

widget.addPeriodHighlighters([
  {
    ID: 'PH1',
    Entries: [
     {
       Start: new Date('2021-01-04T05:00:00'),
       End: new Date('2021-01-04T08:00:00'),
       Color: 'pink',
       Caption: 'Maintenance',
       CaptionColor: 'black'
     }
    ]
   }
]);

APS幫助提升企業生產效率，真正實現生產計劃可視化呈現與控制,快速有效響應不同場景的生產計劃，提高準時交貨能力，提高產能和資源利用率

想要了解甘特圖或慧都APS系統，請登錄慧都網，解決您的問題！