简介
complexion-time-map 是一个用于生成时间分布热力图的 npm 包，可以用于可视化时间数据的分布情况。该包提供了丰富的定制选项，如热力图颜色、时间粒度等，方便用户进行个性化展示。
安装
使用 npm 进行安装：
npm install complexion-time-map
快速开始
引入
在 HTML 文件中引入 complexion-time-map 所需的 JavaScript 和 CSS 文件：
<head> <link href="https://cdn.jsdelivr.net/npm/complexion-time-map@1.0.0/dist/complexion-time-map.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/complexion-time-map@1.0.0/dist/complexion-time-map.js"></script> </head>
数据格式
complexion-time-map 接受一个对象数组作为输入数据，每个对象应包含一个 timestamp 字段表示时间戳。例如：
const data = [ { timestamp: '2022-01-01T00:00:00Z' }, { timestamp: '2022-01-02T00:00:00Z' }, { timestamp: '2022-01-03T12:00:00Z' }, // ... ];
渲染
创建一个 TimeMap 实例并调用 render 方法即可渲染热力图。
const timeMap = new TimeMap({ el: document.getElementById('timemap'), // 将热力图绘制到具有该 ID 的元素上 data, }); timeMap.render();
定制
TimeMap 构造函数可以接受一个配置对象作为参数，用于指定各种选项。例如：
-- -------------------- ---- ------- ----- ------- - --- --------- --- ----------------------------------- ----- ------------ ------- -- -------------- --------- --- -- ------------- -- -- ------ ---- -- -------- --- -- ------- ---- -- -------- --- -- ------- - ---- --- ------ --- ------- --- ----- -- -- -- ------------ --- -----------------展开代码
更多可选配置详见文档。
示例
以下示例展示了如何使用 complexion-time-map 可视化 GitHub 用户提交记录的时间分布情况。
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- ------------- ------------------ ----- ------------------------------------------------------------------------------------------ ----------------- ------- ---- - ------- -- -------- -- - -------- - ------ ------ ------- ------ - -------- ------- ------ ---- ------------------- ------- -------------------------------------------------------------------------------------------------- -------- ---------------------------------------------------- --------- -- ----------- ---------- -- - ----- ------- - ------------- -- ------ --- ------------- ----- ---------- - ------------- -- -- ---------- ------------- ---- ----- ------- - --- --------- --- ----------------------------------- ----- ----------- ------------ ------- --------- --- ------- - ---- --- ------ --- ------- --- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
