DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的大部分開發需求，具備完善的甘特圖圖表庫，功能強大，價格便宜，提供豐富而靈活的JavaScript API接口，與各種服務器端技術（PHP，ASP.NET，Java等）簡單集成，滿足多種定制開發需求。本文給大家講解DHTMLX Gantt的任務內容如何顯示，歡迎大家下載最新版試用體驗。

DHTMLX Gantt正版試用下載

 DHTMLX Chart 是我們JavaScript UI 小部件庫(v8.0)最新主要版本中的核心人物之一。這個圖表小部件收到了一些重要的更新，但其中最值得注意的是一個新的數據可視化選項——日歷熱圖圖表。

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

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

 日歷熱圖提供比較數據的可視化表示，在包含不同時間段的二維日歷視圖中用顏色范圍描繪數據點。圖表中的每個單元格對應一周中的一天，整個時間段從一周到一年。顏色編碼格式允許以簡潔明了的方式顯示復雜的數據。熱圖圖表通常輔以圖例，使其易于閱讀。因此，您可以更快地檢測必要時期內的各種模式或異常。

 早在 19 世紀就使用了熱圖。熱圖的第一個已知用途歸功于法國統計學家 Toussaint Loua，他于 1873 年應用這種技術來呈現巴黎各地區的不同社會統計數據。術語“熱圖”于 1991 年由美國軟件設計師 Cormac 首次注冊商標金尼。他在他的軟件解決方案中使用這種類型的圖表來顯示金融市場信息。

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

• 商業分析
• 網站（用戶交互分析）
• 地理
• 生物學
• 運動的
• 和更多

現在讓我們討論如何將日歷熱圖圖表添加到網頁并使用DHTMLX 圖表對其進行自定義。

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

您可能想知道為什么選擇 DHTMLX Chart 來構建 JavaScript 熱圖圖表，因為有許多其他 JS 庫可以幫助正確完成這項工作。因此，讓我們通過實施如下所示的日歷熱圖的主要階段，看看為此目的使用我們的圖表庫的主要好處。

快速初始化

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

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

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

構造函數采用兩個參數，即放置圖表的容器和一個具有我們將在下一節中討論的配置屬性的對象。

文檔中提供了與圖表初始化相關的完整信息。

簡單配置

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

• type: “calendarHeatMap”（必需）——指定圖表類型
• 系列（必需）——指定數據在圖表中的呈現方式
• legend（可選）- 配置闡明圖表數據的圖例

以下是配置日歷熱圖的方法，如下所示：

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 日的信息。但與此同時，我們的圖表為您提供了大量與日期范圍相關的自定義。

熱圖中的自定義日期范圍

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

 在我們上面的示例中，日期范圍從“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 產品的集成示例——甘特圖、事件日歷和調度程序。

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

 綜上所述，我們可以說 DHTMLX Chart 是將日歷熱圖圖表添加到網頁的可靠工具。廣泛的配置和自定義選項將幫助您根據您的要求調整圖表并確保良好的用戶體驗。

 近 20 年來， DHTML一直在為商業應用程序提供高質量的 JavaScript 組件。與 DHTML的所有客戶（從小型初創公司到中型和大型公司）建立良好和信任的關系，并能夠為任何預算提供先進的解決方案，對 DHTML來說一直是極其重要的。 DHTML很高興這種方法帶來了積極的結果，例如來自流行軟件評論平臺的獎項。 DHTML感謝 產品的實踐經驗的客戶，并希望您在 2023 年取得更多成功的項目！

DHTMLX Gantt享有超十年聲譽，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應用的所有需求，是最完善的甘特圖圖表庫。

甘特圖控件交流群：764148812   

歡迎進群交流討論，獲取更多幫助請聯系