DHTMLX Chart是DHTMLX最新發布的JavaScript UI小部件庫的核心內容之一，這個圖表小部件收到了幾個重要的更新，但其中最引人注目的是一個新的數據可視化選項——日歷熱圖。

DHTMLX專注于JavaScript和HTML5 UI小部件和庫，以幫助開發人員更快地構建功能豐富的、交互式的Web界面。 遵循現代網絡開發的標準和做法，DHTMLX提供針對桌面和移動設備定制的頂級Web應用程序框架。

在本文中，我們將仔細研究這種圖表類型，它的用途、應用領域以及用DHTMLX實現它的好處。

什么是日歷熱圖及其工作原理？

日歷熱圖圖表(Calendar Heatmap Chart)提供了比較數據的可視化表示，在包含不同時間段的二維日歷視圖中描繪帶有顏色范圍的數據點。圖表中的每個單元格對應一周中的一天，整個時間段從一周到一年不等，彩色編碼格式允許以緊湊和清晰的方式顯示復雜的數據。熱圖圖表通常附有圖例，使其易于閱讀，因此用戶可以在必要的時間內更快地檢測到各種模式或異常。

熱圖早在19世紀就開始使用了，已知的第一個使用熱圖的人是法國統計學家杜桑·盧阿(Toussaint Loua)，他在1873年應用這種技術來展示巴黎各區的不同社會統計數據。1991年，美國軟件設計師科馬克·金尼(Cormac Kinney)首次將“熱圖”一詞注冊為商標，他用這種類型的圖表在他的軟件解決方案中顯示金融市場信息。

如今，熱圖圖表已成為許多領域數據分析必備的可視化工具：

• 業務分析
• 網站(用戶交互分析)
• 地理位置
• 生物學
• 體育

現在我們介紹一下如何將日歷熱圖添加到網頁中，并使用DHTMLX Charts對其進行定制。

用DHTMLX構建JavaScript熱圖圖表的好處

您可能想知道為什么選擇DHTMLX Chart來構建JavaScript熱圖圖表，因為有很多其他JS庫可用，因此我們回顧一下實現日歷熱圖的主要階段，并了解使用DHTMLX的圖表庫實現這一目的的主要好處。

快速初始化

DHTMLX Chart最初被設計為一個開發人員友好的工具，允許開發者使用任何可用的圖表類型可視化數據，而無需花費太多時間。將JavaScript熱圖添加到您的應用程序只需要幾個簡單的步驟：下載 Chart包并將其解壓縮到您的項目文件夾中，為圖表創建一個容器、初始化熱圖并將數據加載到圖表中，這樣就完成了。

更具體地說，初始化過程是通過dhx.Chart對象構造函數完成的。

const chart = new dhx.Chart("chart", config);
chart.data.parse(heatMapData);

構造函數接受兩個參數，即放置圖表的容器和一個具有配置屬性的對象。

簡單的配置

現在您可以繼續配置圖表的設置，這個階段非常簡單。使用DHTMLX構建的日歷熱圖配置對象包括三個屬性：

• type：“calendarHeatMap” (required) – 指定圖表類型
• series(必選) – 指定數據如何在圖表中呈現
• 圖例(可選) – 配置圖例，用于澄清圖表數據

下面是如何配置日歷熱圖的方法：

const config = {
type: "calendarHeatMap",
css: "dhx_widget--bordered",
series: [
{
value: "value",
date: "date",
dateFormat: "%d %M %Y",
startDate: "20 Jan 2022",
endDate: "20 Aug 2023",
tooltipTemplate: point => `The profit: ${point[1]}$, ${point[0]}`,
weekStart: "monday",
maxValue: 90,
minValue: -40,
}
],
legend: {
values: {
text: "The profit of my business per day",
tick: 5,
majorTick: 2,
step: 1,
tickTemplate: value => `${value}$`,
},
halign: "center",
valign: "top",
margin: 0,
size: 60, //
}
};

就像圖表小部件中包含的其他類型的圖表一樣，日歷熱圖圖表是高度可定制的，您可以輕松地更改圖表的樣式或修改其關鍵元素。在我們示例的代碼中，您可能注意到使用了tooltipTemplate參數，該參數用于指定用于在工具提示中顯示數據項值的模板。

日歷熱圖圖表的一個關鍵優勢是它允許可視化不同時期的數據，默認情況下，最終用戶將看到從數據集中提供的最早年份的1月1日到最近年份的12月31日的信息。但與此同時，我們的圖表為您提供了大量與日期范圍相關的定制機會。

在熱圖圖表中自定義日期范圍

通常情況下，最終用戶可能需要查看特定時間范圍內的數據，而不是太大的整個數據集。為此，我們的熱圖圖表配置對象包括series屬性中的startDate和endDate參數。需要注意的是，這些參數的日期格式取決于 屬性。

在上面的例子中，日期范圍從“20/01/22”到“20/08/23”(包括在內)，即整個期間包括一年零八個月。通過更改startDate和endDate參數，還可以將圖表設置為顯示一個月、一年或任何其他時期的數據。以下是我們如何在一個月的樣本數據中制作圖表：

const config = {
type: "calendarHeatMap",
series: [
{
value: "value",
date: "date",
dateFormat: "%d %M %Y",
startDate: "20 Jan 2022",
endDate: "20 Feb 2022",
}
],
}

此外，如果未指定日期參數之一，圖表將根據其他參數和數據集自動計算日期范圍。在我們的示例中，如果為startDate參數設置了一個值，但將endDate參數保留為空，則圖表將包括從“20/01/22”到“19/01/24”的時間段。

與其他DHTMLX組件的集成

由于熱圖在商業業務中非常有用，我們為您提供了用于項目管理的頂級DHTMLX產品的集成示例 - Gantt, Event Calendar和Scheduler。

上圖顯示了日歷熱圖在提供JavaScript甘特圖直方圖中呈現的工作時間和加載的總體概述方面是如何有用的。因此，您可以在項目管理應用程序中獲得額外的信息來源。