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

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

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

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

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

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

步驟 1：初始化并配置調(diào)度程序

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

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

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

現(xiàn)在，我們進行調(diào)度程序配置：

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

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

• 添加通過燈箱將事件分配給不同人員/員工的功能，并根據(jù)他們的工作場所為其著色。為此，您需要創(chuàng)建一個員工數(shù)組 ( 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 文件中設(shè)置這些事件的樣式：

<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>

接下來，我們轉(zhuǎn)到 DHTMLX 圖表。

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

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

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對象構(gòu)造函數(shù)初始化條形圖：

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

步驟 3：將數(shù)據(jù)從 Scheduler 傳輸?shù)?Chart

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

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

1.創(chuàng)建calculateEventsLoad()函數(shù)：

function calculateEventsLoad(){

2.通過 API 獲取調(diào)度程序視圖日期：

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

3.聲明變量來存儲計算的數(shù)據(jù)：

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

4.計算每個業(yè)主的工作量：

 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.計算每個業(yè)主的活動工作量：

              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.將結(jié)果數(shù)據(jù)推送到數(shù)組中，并將該數(shù)據(jù)傳遞給圖表組件：

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.創(chuàng)建將準備好的數(shù)據(jù)轉(zhuǎn)換為圖表格式并將其解析為圖表的函數(shù)：

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);

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

步驟 4：將 Scheduler 與 Chart 同步

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

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 中的過濾功能

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

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

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

然后，創(chuàng)建一個輔助函數(shù)來改變這個變量：

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

使用圖表組件的toggleSeries事件單擊圖表圖例中的復(fù)選框后，將調(diào)用此輔助函數(shù)：

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

現(xiàn)在，您應(yīng)該使用結(jié)果數(shù)組在調(diào)度程序中進行過濾：

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

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

總結(jié)

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

慧都21周年慶年終大促現(xiàn)已開啟，DHTMXL全線產(chǎn)品參與優(yōu)惠活動，聯(lián)系了解活動詳情。