简介
complexion-time-map 是一个用于生成时间分布热力图的 npm 包，可以用于可视化时间数据的分布情况。该包提供了丰富的定制选项，如热力图颜色、时间粒度等，方便用户进行个性化展示。
安装
使用 npm 进行安装：
--- ------- -------------------
快速开始
引入
在 HTML 文件中引入 complexion-time-map 所需的 JavaScript 和 CSS 文件：
------ ----- ------------------------------------------------------------------------------------------ ----------------- ------- -------------------------------------------------------------------------------------------------- -------
数据格式
complexion-time-map 接受一个对象数组作为输入数据，每个对象应包含一个 timestamp 字段表示时间戳。例如：
----- ---- - - - ---------- ---------------------- -- - ---------- ---------------------- -- - ---------- ---------------------- -- -- --- --
渲染
创建一个 TimeMap 实例并调用 render 方法即可渲染热力图。
----- ------- - --- --------- --- ----------------------------------- -- ---------- -- ---- ----- --- -----------------
定制
TimeMap 构造函数可以接受一个配置对象作为参数，用于指定各种选项。例如：
----- ------- - --- --------- --- ----------------------------------- ----- ------------ ------- -- -------------- --------- --- -- ------------- -- -- ------ ---- -- -------- --- -- ------- ---- -- -------- --- -- ------- - ---- --- ------ --- ------- --- ----- -- -- -- ------------ --- -----------------
更多可选配置详见文档。
示例
以下示例展示了如何使用 complexion-time-map 可视化 GitHub 用户提交记录的时间分布情况。
--------- -----
----- ----------
------
----- ----------------
------------- ------------------
----- ------------------------------------------------------------------------------------------ -----------------
-------
---- -
------- --
-------- --
-
-------- -
------ ------
------- ------
-
--------
-------
------
---- -------------------
------- --------------------------------------------------------------------------------------------------
--------
----------------------------------------------------
--------- -- -----------
---------- -- -
----- ------- - ------------- -- ------ --- -------------
----- ---------- - ------------- -- --
---------- -------------
----
----- ------- - --- ---------
--- -----------------------------------
----- -----------
------------ -------
--------- ---
------- - ---- --- ------ --- ------- ---
----------------------------------------------------------- ----------
---------------------------------------------------------------------------------------