简介
tortuga-js 是一个适用于前端开发者的一个快速生成时序图的工具。它使用简单，生成出来的图形更容易阅读与分析，是前端开发者进行时序图绘制的好帮手。
安装
在命令行中使用下面的命令进行安装：
npm install tortuga-js --save
使用方法
引入
在 Javascript 中引入 tortuga-js:
import generateTimingDiagram from 'tortuga-js';
创建一个基本的时序图
通过 generateTimingDiagram 可以很容易地创建出一个基础的时序图。假设我们现在要绘制两个信号 Signal1 和 Signal2。
-- -------------------- ---- -------
----- ------ - -
--- -----------------
-------- -
-
----- ----------
----- ----------
--
-
----- ----------
----- ------------------
-
-
--
------------------------------自定义时序图
通过修改 config 参数可以自定义时序图的一些属性。
-- -------------------- ---- -------
----- ------ - -
--- -----------------
----- ------- ---------
------- --
------- ---
------ ----
--------- -----
-------- -
-
----- ----------
----- -----------
--- ---
--
-
----- ----------
----- -------------------
--- -----
-
-
--
------------------------------参数说明：
id: 图表的 DOM 元素的 id。name: 图表的名称。hscale: 时间轴的缩放比例。period: 时间轴的周期。phase: 时间轴的相位。showgrid: 是否显示网格。signals: 信号数组，每个信号都需要包括name和wave两个属性。
信号的类型
在 wave 字段中，可以使用以下字符来表示不同的时序信号类型：
0: 低电平1: 高电平h: 高阻态l: 低阻态x: 未知的状态z: 高阻态
信号的时间间隔
在 wave 字段中，可以使用以下字符来设置信号状态的时间间隔：
1: 一个时间单位2: 两个时间单位3: 三个时间单位4: 四个时间单位5: 五个时间单位6: 六个时间单位7: 七个时间单位8: 八个时间单位9: 九个时间单位p: 半个周期.: 一个时钟周期
代码示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------------
------- ---------------------------------------------------------------------------------
-------
------
---- --------------------------
--------
----- ------ - -
--- -----------------
----- ------- ---------
------- --
------- ---
------ ----
--------- -----
-------- -
-
----- ----------
----- -----------
--- ---
--
-
----- ----------
----- -------------------
--- -----
-
-
--
------------------------------
---------
-------
-------结语
tortuga-js 简单易用，可以让前端开发者在进行时序图绘制时，更高效地完成任务。欢迎大家在项目中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f1c81e8991b448dcb2f