介绍
calendar-heatmap 是一款基于 D3.js 的 JavaScript 库，用于创建漂亮的日历热力图。它可以显示某个时间段内每天的活动情况，并根据该活动的数量或强度将颜色编码应用于每个日期单元格。
本文介绍如何使用 npm 包 calendar-heatmap 来制作日历热力图，涵盖以下主题：
- 安装和设置
- 数据格式
- 绘图选项
- 示例代码
安装和设置
在开始之前，确保您已经安装了 Node.js 和 npm 包管理器。然后，在命令行中执行以下代码：
npm install --save calendar-heatmap
这将在您的项目中安装 calendar-heatmap 包并添加到 package.json 文件的依赖列表中。
接下来，在 HTML 页面中添加以下代码行：
<link rel="stylesheet" href="node_modules/calendar-heatmap/build/calendar-heatmap.css"> <script src="node_modules/d3/dist/d3.min.js"></script> <script src="node_modules/calendar-heatmap/build/calendar-heatmap.min.js"></script>
请注意，此处假设您已经在项目中安装了 D3.js 库，如果没有，请在命令行中执行以下代码：
npm install --save d3
最后，在需要绘制日历热力图的 HTML 元素上创建一个 div，并给它一个唯一的 ID。例如：
<div id="myCalendar"></div>
数据格式
要绘制日历热力图，您需要提供一个表示某段时间内每天活动情况的数据。数据应该是一个包含日期作为键和表示活动强度或数量的数字作为值的 JavaScript 对象。例如：
const myData = { '2023-04-01': 5, '2023-04-02': 12, '2023-04-03': 3, // ... };
请注意，日期应该使用 ISO 格式（yyyy-mm-dd）。
绘图选项
calendar-heatmap 提供了许多选项来自定义日历热力图的外观和行为。以下是一些常用选项：
startDate：时间段的开始日期，必须是 ISO 格式的字符串。endDate：时间段的结束日期，必须是 ISO 格式的字符串。legend：是否显示图例，默认为 true。color：颜色比例尺函数，用于将活动数量或强度转换为颜色。tooltipEnabled：是否启用工具提示，默认为 true。tooltipUnit：工具提示中显示的单位，默认为 ''。onClick：单元格被单击时调用的回调函数。
有关所有选项的完整列表，请参阅文档。
示例代码
现在让我们看一下如何实现一个简单的日历热力图。假设我们有以下数据：
const myData = { '2023-04-01': 5, '2023-04-02': 12, '2023-04-03': 3, // ... };
使用以下代码，您可以将其绘制为一个带有图例和工具提示的日历热力图：
-- -------------------- ---- ------- ----- --- - --- ------------- ---------- ----- ------- ------------- -------------- ------ --- ------------------- ------ --- ------- --- -- -- --- -------- ----- -------- -------------- --- - -------------------- --- ----- -------------- - ---展开代码
此代码创建了一个新的 CalHeatMap 实例，并将其初始化为使用提供的数据在 ID 为 'myCalendar' 的 HTML 元素上显示一个为
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34585
