npm 包 @ttlabs/time-graph-with-context 使用教程
在前端的开发过程中，时间轴图表是一种非常有用的数据可视化形式。而 @ttlabs/time-graph-with-context 就是一款非常优秀的 npm 包，可以轻松地创建一些令人印象深刻的时间轴图表。
安装
首先，在你的项目中安装 @ttlabs/time-graph-with-context：
npm install @ttlabs/time-graph-with-context --save
使用
接下来，我们将展示如何使用这个 npm 包来创建一个简单的时间轴图表。首先，我们需要准备一些数据来源，数据格式如下：
-- -------------------- ---- -------
----- ---- - -
-
--- ---------
------ ---- ----- -------
------ -----------------------
---- -----------------------
--------- ------------
--
-
--- ---------
------ ---- ------ -------
------ -----------------------
---- -----------------------
--------- ------------
--
-
--- ---------
------ ---- ----- -------
------ -----------------------
---- -----------------------
--------- ------------
-
--数据包括每个事件的 id、标题、开始时间、结束时间和类别。
接着，我们需要创建一个 <div> 元素用于放置我们的时间轴图表：
<div id="timeGraph"></div>
然后，在我们的 JavaScript 代码中，创建一个 TimeGraphWithContext 的实例，并将数据和配置传递给它：
-- -------------------- ---- -------
------ - -------------------- - ---- ----------------------------------
----- ---------------- - -------------------------------------
----- ------ - -
----------------- -
------------- ----------
------------- ---------
--
----------- -
----- ----------- ----------
---- ------------
-
--
----- --------- - --- -------------------------------------- ----- --------在这个例子中，我们传递了一个仅包含两个颜色的类别颜色映射，和一个包含两个日期格式的日期格式对象。
最后，我们需要在 CSS 中设置一些样式，以确保我们的时间轴图表能够被正确显示：
#timeGraph {
width: 100%;
height: 400px;
}现在，我们已经成功地创建了一个时间轴图表，如下所示：
配置项
@ttlabs/time-graph-with-context 提供了丰富的配置项，可以用来定制你的时间轴图表的各种外观和行为。下面是所有可用的配置项及其默认值：
-- -------------------- ---- -------
-
-- ----------
------ -------
-- ----------
------- --------
-- -------------
--------------- -------------
-- ------ - ---
------- -------
-- ------ - ---
------- -----------
-- ------ - -----
----------- ---
-- ------ - -------
----------------- ---
-- -------------
----------- -
----- ----------- ----------
---- ------------
--
-- -------------------------
------------- -----
----------- -----
-- ----------------
------------- -----
-- ------------------
----------------- -----
-- ------------------
---------------- ----
-示例代码
下面是一个完整的使用示例，其中包含所有的代码和注释：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------------------------- ------------
---- ------ ---
----- ---------------- -------------------------------------------------------------------
-------
---------- -
------ -----
------- ------
-
--------
-------
------
---- ------ ---
---- ---------------------
---- -- ---------- -- ---
------- --------------------------------------------------------------------------
--------
-- ----
----- ---- - -
-
--- ---------
------ ---- ----- -------
------ -----------------------
---- -----------------------
--------- ------------
--
-
--- ---------
------ ---- ------ -------
------ -----------------------
---- -----------------------
--------- ------------
--
-
--- ---------
------ ---- ----- -------
------ -----------------------
---- -----------------------
--------- ------------
-
--
-- ------
----- ---------------- - -------------------------------------
-- -----
----- ------ - -
----------------- -
------------- ----------
------------- ---------
--
----------- -
----- ----------- ----------
---- ------------
-
--
-- ---------
----- --------- - --- -------------------------------------- ----- --------
---------
-------
-------现在，我们已经在前端开发中成功使用了 @ttlabs/time-graph-with-context 这个 npm 包。希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005588f81e8991b448d5d23