简介
@ttlabs/time-graph 是一个基于 Canvas 的时间轴可视化库。它可以帮助开发者快速地生成带有时间轴的图表，支持缩放、拖动等交互操作，并且提供了丰富的配置选项。
安装
使用 npm 安装 @ttlabs/time-graph：
--- ------- ------------------
使用
------ - --------- - ---- ---------------------
----- --------- - ------------------------------------------------
----- --------- - --- -------------------- -
----- -
-
------ ------ ---
---------- --- ---------------------------------
-------- --- ---------------------------------
--
-
------ ------ ---
---------- --- ---------------------------------
-------- --- ---------------------------------
--
-- ---
--
---
-------------------以上代码将调用 TimeGraph 构造函数创建一个实例，传入容器元素和初始配置项。在配置项中，我们通过 data 属性传入了一个包含多个事件的数组。每个事件都包含 title、startTime 和 endTime 三个属性，分别表示事件的标题、开始时间和结束时间。
调用 timeGraph.render() 方法即可将图表渲染到指定的容器中。
配置项
以下是 @ttlabs/time-graph 支持的配置选项：
data：包含事件数据的数组。height：图表的高度，默认为500。width：图表的宽度，默认为容器元素的宽度。timeRange：时间轴的范围，由两个Date对象组成。visibleTimeRange：时间轴上显示的时间范围，由两个Date对象组成，可通过缩放操作改变。timeAxisTickSpacing：时间轴刻度之间的间隔，以毫秒为单位。timeAxisTickFormat：时间轴刻度的格式化函数，用于将Date对象转换为显示在刻度上的文本。verticalPadding：图表顶部和底部的空白区域的高度，用于显示标题等元素，默认为50。horizontalPadding：图表左侧和右侧的空白区域的宽度，默认为10。minZoomLevel：时间轴的最小缩放级别，默认为0.01。maxZoomLevel：时间轴的最大缩放级别，默认为100。
交互操作
@ttlabs/time-graph 支持多种交互操作，包括缩放、拖动等。以下是常见的交互操作和触发方式：
- 鼠标滚轮：缩放时间轴。
- 鼠标左键拖动：拖动时间轴。
我们可以通过监听 zoom 和 pan 事件，获取缩放和拖动的信息：
----------------------------- ----------- ----------------- -- - ----------------- ------ --------------- -------------------- ---- ------ ---------------------- --- ---------------------------- ------------------ -- - -------------------- ---- ------ ---------------------- ---
示例应用
以下是一个使用 @ttlabs/time-graph 来展示 GitHub 项目的贡献图的示例：
------ - --------- - ---- ---------------------
----- -------------------- - ----- ---------- ----------- -- -
----- --- - ----------------------------------------------------------------------
----- -------- - ----- -----------
----- ---- - ----- ----------------
----- ------ - --- ------------
----- -------- - ---------------------------- -------------
----- ------------ - ---------------------------------------------
----- ---- - ---
--------------------------- -- -
----- -------- - -------------------------------
----- ----- - --------------------------------
----- ---- - --- ---------------
-----------
------ --------- ------------- -- -------------
---------- -----
-------- -----
---
---
------ -----
--
----- ------------- - ----- ---------- ----------- -- -
----- --------- - ------------------------------------------------
----- ---- - ----- ------------------------------ ------------
----- --------- - --- -------------------- -
-----
---------- -
--- ---------------------------------
--- ---------------------------------
--
----------------- -
--- ---------------------------------
--- ---------------------------------
--
-------------------- - - -- - -- - -- - -----
------------------- ------ -- --------------------------
---------------- ----
------------- -----
------------- ---
---
-------------------
-- --- - ---- -- --- ----------
----- ---- - ----------------------------
--------- - -----------------------------------------------
---------------- - ----------------------------
------------------------------------------ -----------
--
------------------------- ---------以上代码将展示一个 @ttlabs/time-graph 组件，用于展示某个 GitHub 项目中的代码贡献情况。我们通过 getContributionsData 函数获取项目的贡献数据，传入 TimeGraph 构造函数中即可。在配置项中，我们将可见时间范围定为 2019 年 6 月，并将轴上的刻度分为一周一个间隔，方便用户进行查看和比较。同时，我们设置最小缩放级别为 0.01，最大缩放级别为 10，以支持更多的交互操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005588e81e8991b448d5d20