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

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

點擊下載VARCHART XGantt正式版

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

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

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

這是日歷的簡單定義，其中定義了兩個帶工作時間的時段（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的甘特圖就只能在非工作時間工作。這是出于安全考慮，因為它會迫使您定義和應用適當?shù)娜諝v對象。

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

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

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

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

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

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

可視化的最佳實踐

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

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

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

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

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

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

用戶互動的最佳做法

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

活動視圖

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

日歷和期間熒光筆之間的區(qū)別

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

與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幫助提升企業(yè)生產(chǎn)效率，真正實現(xiàn)生產(chǎn)計劃可視化呈現(xiàn)與控制,快速有效響應不同場景的生產(chǎn)計劃，提高準時交貨能力，提高產(chǎn)能和資源利用率

想要了解甘特圖或慧都APS系統(tǒng)，請登錄慧都網(wǎng)，解決您的問題！