npm 包 @ttlabs/time-graph 使用教程

阅读时长 7 分钟读完

简介

@ttlabs/time-graph 是一个基于 Canvas 的时间轴可视化库。它可以帮助开发者快速地生成带有时间轴的图表,支持缩放、拖动等交互操作,并且提供了丰富的配置选项。

安装

使用 npm 安装 @ttlabs/time-graph

使用

-- -------------------- ---- -------
------ - --------- - ---- ---------------------

----- --------- - ------------------------------------------------
----- --------- - --- -------------------- -
  ----- -
    -
      ------ ------ ---
      ---------- --- ---------------------------------
      -------- --- ---------------------------------
    --
    -
      ------ ------ ---
      ---------- --- ---------------------------------
      -------- --- ---------------------------------
    --
    -- ---
  --
---

-------------------

以上代码将调用 TimeGraph 构造函数创建一个实例,传入容器元素和初始配置项。在配置项中,我们通过 data 属性传入了一个包含多个事件的数组。每个事件都包含 titlestartTimeendTime 三个属性,分别表示事件的标题、开始时间和结束时间。

调用 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 支持多种交互操作,包括缩放、拖动等。以下是常见的交互操作和触发方式:

  • 鼠标滚轮:缩放时间轴。
  • 鼠标左键拖动:拖动时间轴。

我们可以通过监听 zoompan 事件,获取缩放和拖动的信息:

示例应用

以下是一个使用 @ttlabs/time-graph 来展示 GitHub 项目的贡献图的示例:

-- -------------------- ---- -------
------ - --------- - ---- ---------------------

----- -------------------- - ----- ---------- ----------- -- -
  ----- --- - ----------------------------------------------------------------------
  ----- -------- - ----- -----------
  ----- ---- - ----- ----------------

  ----- ------ - --- ------------
  ----- -------- - ---------------------------- -------------
  ----- ------------ - ---------------------------------------------

  ----- ---- - ---
  --------------------------- -- -
    ----- -------- - -------------------------------
    ----- ----- - --------------------------------
    ----- ---- - --- ---------------
    -----------
      ------ --------- ------------- -- -------------
      ---------- -----
      -------- -----
    ---
  ---

  ------ -----
--

----- ------------- - ----- ---------- ----------- -- -
  ----- --------- - ------------------------------------------------
  ----- ---- - ----- ------------------------------ ------------

  ----- --------- - --- -------------------- -
    -----
    ---------- -
      --- ---------------------------------
      --- ---------------------------------
    --
    ----------------- -
      --- ---------------------------------
      --- ---------------------------------
    --
    -------------------- - - -- - -- - -- - -----
    ------------------- ------ -- --------------------------
    ---------------- ----
    ------------- -----
    ------------- ---
  ---

  -------------------

  -- --- - ---- -- --- ----------
  ----- ---- - ----------------------------
  --------- - -----------------------------------------------
  ---------------- - ----------------------------
  ------------------------------------------ -----------
--

------------------------- ---------

以上代码将展示一个 @ttlabs/time-graph 组件,用于展示某个 GitHub 项目中的代码贡献情况。我们通过 getContributionsData 函数获取项目的贡献数据,传入 TimeGraph 构造函数中即可。在配置项中,我们将可见时间范围定为 2019 年 6 月,并将轴上的刻度分为一周一个间隔,方便用户进行查看和比较。同时,我们设置最小缩放级别为 0.01,最大缩放级别为 10,以支持更多的交互操作。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005588e81e8991b448d5d20

纠错
反馈