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

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

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

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

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

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

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

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

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

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

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

快速初始化

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

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

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

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

簡單的配置

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

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

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

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參數(shù)，該參數(shù)用于指定用于在工具提示中顯示數(shù)據(jù)項值的模板。

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

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

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

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

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

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

與其他DHTMLX組件的集成

由于熱圖在商業(yè)業(yè)務中非常有用，我們?yōu)槟峁┝擞糜陧椖抗芾淼捻敿塂HTMLX產(chǎn)品的集成示例 - Gantt, Event Calendar和Scheduler。

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