GitHub 是程序员、开源爱好者及业内人士最常见的协作平台之一，此平台提供 GitHub calendar 作为用户的健康指标和开源贡献统计指标。今天我们将学习如何使用 npm 包 github-calendar-legend 实现创建一个 github calendar 刻度尺。
npm 安装
首先我们需要在我们的项目中安装 github-calendar-legend，使用下面的命令：
npm install --save-dev github-calendar-legend
当然，也可以直接在项目根目录下执行：
npm i github-calendar-legend -S
基础用法
-- -------------------- ---- -------
------ -------------------- ---- -------------------------
----- --------- - ------------------------------
------------ - ------------------
-------------------------------------
----- ------------ - -
--------- ------
--------- ---------
------- -
---- ----- ---------------
---- ----- --------------
--
------- -
---- --------
---- ---------
-
--
----- -------------------- - --------------------------------------- --------------代码解释：
首先，我们需要引入 github-calendar-legend，然后我们创建一个 div 元素作为我们的容器，并传递该元素的 id 给 GithubCalendarLegend()，由它创建我们的 github 刻度尺。另外，我们还使用了 legendConfig 参数来自定义我们的 github 刻度尺。
关于 legendConfig 参数：
legendConfig.fullSize- (bool) 指定刻度尺是否与整个 calendar 区域同宽同高。默认值为false。legendConfig.position- (string) 指定刻度尺位置。可以是'top'或'bottom'。默认值为'bottom'。legendConfig.labels- (object) 指定左右标签。键min和max分别表示做和右标签文本。默认为空对象。legendConfig.colors- (object) 指定左右标签颜色。键min和max分别表示做和右标签背景颜色。默认为空对象。
深度用法
-- -------------------- ---- -------
------ -------------------- ---- -------------------------
----------------------
--------------- ------------------
-------------- --- ------ ---------------
------------ ------------- ---------
----- -
-
------ --
------- --- ---------------
------ -------
--
-
------ --
------- -- --------------
------ ---------
--
-
------ --
------- -- ---------------
------ ---------
--
-
------ --
------- -- ---------------
------ ---------
--
-
------ ---
------- --- ---------------
------ ---------
-
-
---上述代码中，构造函数接受一个对象作为参数，详细解释如下：
githubCalendar- (string|Element) 必填项。如果你的容器有一个id属性和一个唯一的值，直接将id值传递给githubCalendar参数；否则，可以直接传递一个 DOM 元素。该参数用于指定 github 刻度尺的容器。calendarTitle- (string) 可选项，用于指定 github 标题的文本。legendTitle- (string) 可选项，用于指定左右标签区域的标题文本。data- (array) 可选项，定义为符合github-calendar-legend预先设定列表项的一组数据对象。默认情况下，自定义列表将会自动覆盖原始的列表，其中count属性用于指定该程度的最高值。
指导意义
github-calendar-legend 为 GitHub 用户提供了方便的交互功能。通过定制 GitHub 的时间表及其刻度尺，用户不仅能够针对某一项特定的工作和关键任务设定和跟踪计划，而且还能够核对自己和团队的贡献和进度。此外，该 npm 包的使用方法简单、易懂，便于前端工程师使用和交流。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5efbfe8b403f2923b035badd