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

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

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

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

DHTMLX Scheduler 與 Suite 圖表庫(kù)的連接指南

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

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

一般來(lái)說(shuō)，DHTMLX Scheduler 可以通過(guò)調(diào)度程序的標(biāo)記或標(biāo)頭配置屬性在頁(yè)面上初始化。

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

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

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

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

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

• 添加通過(guò)燈箱將事件分配給不同人員/員工的功能，并根據(jù)他們的工作場(chǎng)所為其著色。為此，您需要?jiǎng)?chuàng)建一個(gè)員工數(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>

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

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

首先，您需要?jiǎng)?chuàng)建一個(gè)配置，在其中指定圖表的類型和其他設(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對(duì)象構(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。為此，您需要獲取一周中每一天的所有事件，計(jì)算每個(gè)事件的持續(xù)時(shí)間（以小時(shí)為單位），并將這些小時(shí)數(shù)分配給 3 個(gè)不同的對(duì)象（您的場(chǎng)景中的對(duì)象數(shù)量可能不同，我們的演示中有 3 個(gè)），具體取決于這些事件分配給哪個(gè)所有者。

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

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

function calculateEventsLoad(){

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

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

3.聲明變量來(lái)存儲(chǔ)計(jì)算的數(shù)據(jù)：

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

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

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

5.獲取一周中每一天的活動(dòng)：

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

6.計(jì)算每個(gè)業(yè)主的活動(dòng)工作量：

              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)建將準(zhǔn)備好的數(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í)，您將看到包含準(zhǔn)確數(shù)據(jù)的圖表和調(diào)度程序。

步驟 4：將 Scheduler 與 Chart 同步

最后，您需要同步組件以確保在調(diào)度日歷中所做的更改將立即顯示在條形圖中。您應(yīng)該使用調(diào)度程序事件偵聽(tīng)器將調(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 中的過(guò)濾功能

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

首先，您需要?jiǎng)?chuàng)建一個(gè)變量來(lái)存儲(chǔ)過(guò)濾器值：

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

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

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)度程序中進(jìn)行過(guò)濾：

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

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

總結(jié)

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

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