简介
@ttlabs/time-graph
是一个基于 Canvas 的时间轴可视化库。它可以帮助开发者快速地生成带有时间轴的图表,支持缩放、拖动等交互操作,并且提供了丰富的配置选项。
安装
使用 npm
安装 @ttlabs/time-graph
:
npm install @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
事件,获取缩放和拖动的信息:
timeGraph.addListener('zoom', (zoomLevel, visibleTimeRange) => { console.log(`Zoom level: ${zoomLevel}`); console.log(`Visible time range: ${visibleTimeRange}`); }); timeGraph.addListener('pan', (visibleTimeRange) => { console.log(`Visible time range: ${visibleTimeRange}`); });
示例应用
以下是一个使用 @ttlabs/time-graph
来展示 GitHub 项目的贡献图的示例:
-- -------------------- ---- ------- ------ - --------- - ---- --------------------- ----- -------------------- - ----- ---------- ----------- -- - ----- --- - ---------------------------------------------------------------------- ----- -------- - ----- ----------- ----- ---- - ----- ---------------- ----- ------ - --- ------------ ----- -------- - ---------------------------- ------------- ----- ------------ - --------------------------------------------- ----- ---- - --- --------------------------- -- - ----- -------- - ------------------------------- ----- ----- - -------------------------------- ----- ---- - --- --------------- ----------- ------ --------- ------------- -- ------------- ---------- ----- -------- ----- --- --- ------ ----- -- ----- ------------- - ----- ---------- ----------- -- - ----- --------- - ------------------------------------------------ ----- ---- - ----- ------------------------------ ------------ ----- --------- - --- -------------------- - ----- ---------- - --- --------------------------------- --- --------------------------------- -- ----------------- - --- --------------------------------- --- --------------------------------- -- -------------------- - - -- - -- - -- - ----- ------------------- ------ -- -------------------------- ---------------- ---- ------------- ----- ------------- --- --- ------------------- -- --- - ---- -- --- ---------- ----- ---- - ---------------------------- --------- - ----------------------------------------------- ---------------- - ---------------------------- ------------------------------------------ ----------- -- ------------------------- ---------
以上代码将展示一个 @ttlabs/time-graph
组件,用于展示某个 GitHub 项目中的代码贡献情况。我们通过 getContributionsData
函数获取项目的贡献数据,传入 TimeGraph
构造函数中即可。在配置项中,我们将可见时间范围定为 2019 年 6 月,并将轴上的刻度分为一周一个间隔,方便用户进行查看和比较。同时,我们设置最小缩放级别为 0.01
,最大缩放级别为 10
,以支持更多的交互操作。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005588e81e8991b448d5d20