DHTMLX Scheduler是一個全面的 UI 組件，用于處理面向業務的 Web 應用程序中復雜的調度和任務管理需求。但是，某些場景可能需要自定義解決方案。例如，如果項目的資源（即勞動力）有限，則需要確保以更高的精度分配他們的工作量。為此，應用條形圖等數據可視化工具會很有用。

DHTMLX Suite允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕松組合到單個應用程序界面中。

DHTMLX Scheduler 最新版下載   DHTMLX Suite 最新版下載

在本教程中，您將學習如何將我們的 Scheduler 組件連接到DHTMLX Suite中的 JavaScript Chart 庫，從而增強對調度應用程序任何視圖中的資源工作負載的控制。

DHTMLX Scheduler 與 Suite 圖表庫的連接指南

如果您需要在我們的JavaScript 調度庫中添加一種用于管理資源工作量的輔助機制，您可以使用基于 Suite 的 Chart 小部件的條形圖對其進行補充，如下面的示例所示。使用此示例，您可以更改員工的工作時間，這些更改將動態顯示在圖表中。此外，您還可以通過單擊圖表圖例中的員工姓名來隱藏和顯示兩個小部件中特定員工的數據。

步驟 1：初始化并配置調度程序

一般來說，DHTMLX Scheduler 可以通過調度程序的標記或標頭配置屬性在頁面上初始化。

在這篇文章中，我們使用第二種選擇：

scheduler.init ( " scheduler_here " , new Date ( 2024 , 5 , 24 ) , "week" ) ;

現在，我們進行調度程序配置：

• 限制顯示的工作時間，并將時間步長設置為30分鐘：

scheduler.config.first_hour = 9;
scheduler.config.last_hour = 22;
scheduler.config.time_step = 30;
scheduler.config.cascade_event_display = true;

• 添加通過燈箱將事件分配給不同人員/員工的功能，并根據他們的工作場所為其著色。為此，您需要創建一個員工數組 ( owner_opts )，并將他們的選擇控件添加到燈箱：

let owners = [
    { key: 1, label: 'John' },
    { key: 2, label: 'Hannah' },
    { key: 3, label: 'David' }
];
 
scheduler.locale.labels.section_select = 'Owner';
 
scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"select", height:40, map_to:"owner_id", type:"select", options:owners},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

scheduler.templates.event_class = function(start, end, ev){
     return `owner_${ev.owner_id}`;
}

• 在 CSS 文件中設置這些事件的樣式：

<style>
    .owner_1 {
        --dhx-scheduler-event-background: #394E79;
        --dhx-scheduler-event-color: white;
    }
    .owner_2 {
        --dhx-scheduler-event-background: #5E83BA;
        --dhx-scheduler-event-color: white;
    }
    .owner_3 {
        --dhx-scheduler-event-background: #C2D2E9;
        --dhx-scheduler-event-color: white;
    }
</style>

接下來，我們轉到 DHTMLX 圖表。

步驟 2：初始化和配置圖表

首先，您需要創建一個配置，在其中指定圖表的類型和其他設置。使用getConfig函數：

function getConfig() {
   return {
       type: "bar",
       css: "dhx_widget--bg_white dhx_widget--bordered",
// Set the coordinate axes in accordance with the displayed data
       scales: {
           "bottom": {
               text: "day",
               textTemplate: function(day) {
                   return day;
               }
           },
           "left":{
               title: "Hours",
               max: 24
               }
       },
// Configure the chart series  
    series: [
           {
               id: "A",
               value: "John",
               fill: "#394E79",
               color: "none"
           },
           {
               id: "B",
               value: "Hannah",
               fill: "#5E83BA",
               color: "none"
           },
           {
               id: "C",
               value: "David",
               fill: "#C2D2E9",
               color: "none"
           }
       ],
// Add the chart legend configuration
      legend: {
           series: ["A", "B", "C"],
           form: "rect",
           valign: "top",
           halign: "right"
       }
   }
}

之后，使用dhx.Chart對象構造函數初始化條形圖：

const chart = new dhx.Chart ( " chart " , getConfig ( ) ) ;

步驟 3：將數據從 Scheduler 傳輸到 Chart

由于 Scheduler 和 Chart 使用不同的數據格式，因此您需要先轉換 Scheduler 數據，然后再將其傳輸到 Chart。為此，您需要獲取一周中每一天的所有事件，計算每個事件的持續時間（以小時為單位），并將這些小時數分配給 3 個不同的對象（您的場景中的對象數量可能不同，我們的演示中有 3 個），具體取決于這些事件分配給哪個所有者。

您需要編寫自定義函數并使用部分 Scheduler API：

1.創建calculateEventsLoad()函數：

function calculateEventsLoad(){

2.通過 API 獲取調度程序視圖日期：

 let state = scheduler.getState();
    let min = state.min_date;

3.聲明變量來存儲計算的數據：

  let tempDuration_a, tempDuration_b, tempDuration_c;
    let workload = [];

4.計算每個業主的工作量：

 for(let i = 0; i<7; i++){
        tempDuration_a = 0;
        tempDuration_b = 0;
        tempDuration_c = 0;

5.獲取一周中每一天的活動：

 let dayEvs = scheduler.getEvents(scheduler.date.add(new Date(min), i, "day"), scheduler.date.add(new Date(min), i+1, "day"));

6.計算每個業主的活動工作量：

              dayEvs.forEach(ev => {
            const duration = (ev.end_date - ev.start_date) / (1000 * 60 * 60);
            switch (ev.owner_id) {
                case "1":
                    tempDuration_a += duration;
                    break;
                case "2":
                    tempDuration_b += duration;
                    break;
                case "3":
                    tempDuration_c += duration;
                    break;
            }
        });

7.將結果數據推送到數組中，并將該數據傳遞給圖表組件：

workload[i] = {
            "workload_a": tempDuration_a,
            "workload_b": tempDuration_b,
            "workload_c": tempDuration_c,
            "day": scheduler.date.add(new Date(min), i, "day").getDate()
        };
    }
    generateChartData(workload);
}

8.創建將準備好的數據轉換為圖表格式并將其解析為圖表的函數：

function generateChartData(workload){
    // Generate and parse prepared chart's data
    const chartData = workload.map(el => ({
            day : el.day,
            "John" : el.workload_a,
            "Hannah" : el.workload_b,
            "David" : el.workload_c,
        })
    );

    chart.data.parse(chartData);

調用calculateEventsLoad()函數時，您將看到包含準確數據的圖表和調度程序。

步驟 4：將 Scheduler 與 Chart 同步

最后，您需要同步組件以確保在調度日歷中所做的更改將立即顯示在條形圖中。您應該使用調度程序事件偵聽器將調度程序更新同步到圖表中，如下例所示：

scheduler.attachEvent("onEventChanged", function(id,ev){
    calculateEventsLoad();
});

scheduler.attachEvent("onEventAdded", function(id,ev){
    calculateEventsLoad();
});

scheduler.attachEvent("onEventSave",function(id,ev,is_new){
    calculateEventsLoad();
    return true;
})

scheduler.attachEvent("onViewChange", function (new_mode , new_date){
    calculateEventsLoad();
});

步驟 5：同步 Chart 和 Scheduler 中的過濾功能

條形圖帶有過濾功能，可以通過單擊圖表的圖例來顯示和隱藏特定員工的數據。您可以將此過濾功能與調度程序同步，以在那里過濾事件。

首先，您需要創建一個變量來存儲過濾器值：

const filterOptions = new Set([1, 2, 3]);

然后，創建一個輔助函數來改變這個變量：

function setFilter(ownerID){
    if(filterOptions.has(ownerID)){
        filterOptions.delete(ownerID);
    }else{
        filterOptions.add(ownerID);
    }
    scheduler.setCurrentView();
}

使用圖表組件的toggleSeries事件單擊圖表圖例中的復選框后，將調用此輔助函數：

chart.events.on("toggleSeries", function(id){
    switch (id) {
        case "A":
            setFilter(1);
            break;
        case "B":
            setFilter(2);
            break;
        case "C":
            setFilter(3);
            break;
        }
});

現在，您應該使用結果數組在調度程序中進行過濾：

scheduler.filter_week = function(id, event){
    return filterOptions.has(parseInt(event.owner_id));
}

就是這樣。按照上述步驟，您可以像我們的示例中那樣使用條形圖來豐富您的 JavaScript 調度程序，以更準確地管理資源工作負載。

總結

正確使用資源是任何項目中有效任務管理的關鍵方面。使用 JavaScript 調度日歷，您必須確保資源（員工、房間、設備）以最佳方式加載任務或約會。使用附加工具（例如 Suite 的 Chart 小部件）可以更全面地了解此事，本教程提供了快速順利完成集成所需的所有信息。

慧都21周年慶年終大促現已開啟，DHTMXL全線產品參與優惠活動，聯系了解活動詳情。