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

DHTMLX Gantt正版試用下載

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

在這篇文章中，我們將仔細(xì)研究這種圖表類型、它的用途、應(yīng)用領(lǐng)域以及使用 DHTMLX 實(shí)現(xiàn)它的好處

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

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

早在 19 世紀(jì)就使用了熱圖。熱圖的第一個(gè)已知用途歸功于法國統(tǒng)計(jì)學(xué)家 Toussaint Loua，他于 1873 年應(yīng)用這種技術(shù)來呈現(xiàn)巴黎各地區(qū)的不同社會(huì)統(tǒng)計(jì)數(shù)據(jù)。術(shù)語“熱圖”于 1991 年由美國軟件設(shè)計(jì)師 Cormac 首次注冊(cè)商標(biāo)金尼。他在他的軟件解決方案中使用這種類型的圖表來顯示金融市場(chǎng)信息。

如今，熱力圖已經(jīng)成為很多領(lǐng)域數(shù)據(jù)分析必備的可視化工具：

• 商業(yè)分析
• 網(wǎng)站（用戶交互分析）
• 地理
• 生物學(xué)
• 運(yùn)動(dòng)的
• 和更多

現(xiàn)在讓我們討論如何將日歷熱圖圖表添加到網(wǎng)頁并使用DHTMLX 圖表對(duì)其進(jìn)行自定義。

使用 DHTMLX 構(gòu)建 JavaScript 熱圖圖表的好處

您可能想知道為什么選擇 DHTMLX Chart 來構(gòu)建 JavaScript 熱圖圖表，因?yàn)橛性S多其他 JS 庫可以幫助正確完成這項(xiàng)工作。因此，讓我們通過實(shí)施如下所示的日歷熱圖的主要階段，看看為此目的使用我們的圖表庫的主要好處。

快速初始化

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

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

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

構(gòu)造函數(shù)采用兩個(gè)參數(shù)，即放置圖表的容器和一個(gè)具有我們將在下一節(jié)中討論的配置屬性的對(duì)象。

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

簡(jiǎn)單配置

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

• type: “calendarHeatMap”（必需）——指定圖表類型
• 系列（必需）——指定數(shù)據(jù)在圖表中的呈現(xiàn)方式
• legend（可選）- 配置闡明圖表數(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, //
}
};

就像我們的圖表小部件中包含的其他類型的圖表一樣，日歷熱圖圖表是高度可定制的。您可以輕松更改圖表的樣式或修改其關(guān)鍵元素。在我們示例的代碼中，您可能會(huì)注意到tooltipTemplate參數(shù)的使用旨在指定用于在工具提示中顯示數(shù)據(jù)項(xiàng)值的模板。圖表的其他常見自定義選項(xiàng)在我們文檔的相應(yīng)部分中進(jìn)行了描述。

我們的日歷熱圖的主要優(yōu)勢(shì)之一是它允許可視化不同時(shí)間段的數(shù)據(jù)。默認(rèn)情況下，最終用戶將看到數(shù)據(jù)集中提供的從最早一年的 1 月 1 日到最近一年的 12 月 31 日的信息。但與此同時(shí)，我們的圖表為您提供了大量與日期范圍相關(guān)的自定義。

熱圖中的自定義日期范圍

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

在我們上面的示例中，日期范圍從“20/01/22”到“20/08/23”（含），即整個(gè)期間包括一年零八個(gè)月。通過更改startDate和endDate參數(shù)，我們還可以將圖表設(shè)置為顯示一個(gè)月、一年或任何其他時(shí)間段的數(shù)據(jù)。以下是我們?nèi)绾卧跇颖菊故緮?shù)據(jù)中制作一個(gè)月的圖表：

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

自動(dòng)計(jì)算日期范圍。在我們的示例中，如果我們?yōu)閟tartDate參數(shù)設(shè)置一個(gè)值但將endDate參數(shù)留空，則圖表將包含從“20/01/22”到“19/01/24”的時(shí)間段。

中提供了有關(guān)日歷熱圖中自定義日期范圍的所有詳細(xì)信息。

與其他 DHTMLX 組件集成

由于熱圖圖表對(duì)于商業(yè)目的非常有用，我們?yōu)槟峁┡c用于項(xiàng)目管理的頂級(jí) DHTMLX 產(chǎn)品的集成示例——甘特圖、事件日歷和調(diào)度程序。

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

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

近 20 年來， DHTML一直在為商業(yè)應(yīng)用程序提供高質(zhì)量的 JavaScript 組件。與 DHTML的所有客戶（從小型初創(chuàng)公司到中型和大型公司）建立良好和信任的關(guān)系，并能夠?yàn)槿魏晤A(yù)算提供先進(jìn)的解決方案，對(duì) DHTML來說一直是極其重要的。 DHTML很高興這種方法帶來了積極的結(jié)果，例如來自流行軟件評(píng)論平臺(tái)的獎(jiǎng)項(xiàng)。 DHTML感謝 產(chǎn)品的實(shí)踐經(jīng)驗(yàn)的客戶，并希望您在 2023 年取得更多成功的項(xiàng)目！

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

甘特圖控件交流群：764148812   

歡迎進(jìn)群交流討論，獲取更多幫助請(qǐng)聯(lián)系