什么是Heatmap（热图）图表？用DHTMLX可实现快速构建

news2024/10/6 10:40:34

DHTMLX Chart是DHTMLX最新发布的JavaScript UI小部件库的核心内容之一，这个图表小部件收到了几个重要的更新，但其中最引人注目的是一个新的数据可视化选项——日历热图。

DHTMLX专注于JavaScript和HTML5 UI小部件和库，以帮助开发人员更快地构建功能丰富的、交互式的Web界面。遵循现代网络开发的标准和做法，DHTMLX提供针对桌面和移动设备定制的顶级Web应用程序框架。

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

DHTMLX Suite正式版下载

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

日历热图图表(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参数。需要注意的是，这些参数的日期格式取决于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",
}
],
}