为什么使用 DHTMLX 构建 JavaScript 热图图表

雨点打透心脏的1/2处 2023-09-25 00:24 98阅读 0赞

[DHTMLX Gantt][]是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求，具备完善的甘特图图表库，功能强大，价格便宜，提供丰富而灵活的JavaScript API接口，与各种服务器端技术（PHP，ASP.NET，Java等）简单集成，满足多种定制开发需求。本文给大家讲解DHTMLX Gantt的任务内容如何显示，欢迎大家下载最新版试用体验。

**[DHTMLX Gantt正版试用下载（qun：764148812）![icon-default.png?t=N176][icon-default.png_t_N176]https://www.evget.com/product/4213/download][DHTMLX Gantt_qun_764148812_icon-default.png_t_N176_icon-default.png_t_N176_https_www.evget.com_product_4213_download]**

DHTMLX Chart 是我们JavaScript UI 小部件库(v8.0)最新主要版本中的核心人物之一。这个图表小部件收到了一些重要的更新，但其中最值得注意的是一个新的数据可视化选项——日历热图图表。

在这篇文章中，我们将仔细研究这种图表类型、它的用途、应用领域以及使用 DHTMLX 实现它的好处

什么是日历热图及其工作原理

日历热图提供比较数据的可视化表示，在包含不同时间段的二维日历视图中用颜色范围描绘数据点。图表中的每个单元格对应一周中的一天，整个时间段从一周到一年。颜色编码格式允许以简洁明了的方式显示复杂的数据。热图图表通常辅以图例，使其易于阅读。因此，您可以更快地检测必要时期内的各种模式或异常。

早在 19 世纪就使用了热图。热图的第一个已知用途归功于法国统计学家 Toussaint Loua，他于 1873 年应用这种技术来呈现巴黎各地区的不同社会统计数据。术语“热图”于 1991 年由美国软件设计师 Cormac 首次注册商标金尼。他在他的软件解决方案中使用这种类型的图表来显示金融市场信息。

如今，热力图已经成为很多领域数据分析必备的可视化工具：

*  商业分析
 *  网站（用户交互分析）
 *  地理
 *  生物学
 *  运动的
 *  和更多

现在让我们讨论如何将日历热图图表添加到网页并使用DHTMLX 图表对其进行自定义。

**使用 DHTMLX 构建 JavaScript 热图图表的好处**

您可能想知道为什么选择 DHTMLX Chart 来构建 JavaScript 热图图表，因为有许多其他 JS 库可以帮助正确完成这项工作。因此，让我们通过实施如下所示的日历热图的主要阶段，看看为此目的使用我们的图表库的主要好处。

![dbe9920ae017640b387689c875287898.gif][]

[查看样品 >][Link 1]

**快速初始化**

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, //
>     }
>     };

![abcab13b649fec64e79a62ee76fb7207.jpeg][]

就像我们的图表小部件中包含的其他类型的图表一样，日历热图图表是高度可定制的。您可以轻松更改图表的样式或修改其关键元素。在我们示例的代码中，您可能会注意到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",
>     }
>     ],
>     }

![d8c3b660b1ccab062ef251c7eeb28146.png][]

[此外，如果您未指定其中一个日期参数，图表将根据其他参数和数据集][Link 2]自动计算日期范围。**在我们的示例中，如果我们为startDate**参数设置一个值但将**endDate**参数留空，则图表将包含从“20/01/22”到“19/01/24”的时间段。

中提供了有关日历热图中自定义日期范围的所有详细信息。

**与其他 DHTMLX 组件集成**

由于热图图表对于商业目的非常有用，我们为您提供与用于项目管理的顶级 DHTMLX 产品的集成示例——甘特图、事件日历和调度程序。

![4d52406029a1a413096463b8535ac260.png][]

[查看样品 >][Link 3]

上图显示了日历热图如何有助于提供JavaScript 甘特图直方图中显示的工作时间和超负荷的总体概览。因此，您可以在项目管理应用程序中获得额外的信息来源。

综上所述，我们可以说 DHTMLX Chart 是将日历热图图表添加到网页的可靠工具。广泛的配置和自定义选项将帮助您根据您的要求调整图表并确保良好的用户体验。

近 20 年来， DHTML一直在为商业应用程序提供高质量的 JavaScript 组件。与 DHTML的所有客户（从小型初创公司到中型和大型公司）建立良好和信任的关系，并能够为任何预算提供先进的解决方案，对 DHTML来说一直是极其重要的。 DHTML很高兴这种方法带来了积极的结果，例如来自流行软件评论平台的奖项。 DHTML感谢 产品的实践经验的客户，并希望您在 2023 年取得更多成功的项目！

[DHTMLX Gantt]: https://www.evget.com/product/4213/license
[icon-default.png_t_N176]: https://csdnimg.cn/release/blog_editor_html/release2.2.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N176
[DHTMLX Gantt_qun_764148812_icon-default.png_t_N176_icon-default.png_t_N176_https_www.evget.com_product_4213_download]: https://www.evget.com/product/4213/download
[dbe9920ae017640b387689c875287898.gif]: https://img-blog.csdnimg.cn/img_convert/dbe9920ae017640b387689c875287898.gif
[Link 1]: https://snippet.dhtmlx.com/ptncsadz?tag=chart&mode=wide
[abcab13b649fec64e79a62ee76fb7207.jpeg]: https://img-blog.csdnimg.cn/img_convert/abcab13b649fec64e79a62ee76fb7207.jpeg
[d8c3b660b1ccab062ef251c7eeb28146.png]: https://img-blog.csdnimg.cn/img_convert/d8c3b660b1ccab062ef251c7eeb28146.png
[Link 2]: https://snippet.dhtmlx.com/ptncsadz?tag=chart&mode=html
[4d52406029a1a413096463b8535ac260.png]: https://img-blog.csdnimg.cn/img_convert/4d52406029a1a413096463b8535ac260.png
[Link 3]: https://snippet.dhtmlx.com/jodcbkr5?mode=wide