在现代 web 应用程序的开发中，对于前端工程师来说不要错过 Npm、Ember.js 和 ember-timetree，它们的稳健性、可见性和开源性使其成为了前端工程师的首选工具。本文将介绍如何使用 npm 包 Ember-timetree，同时提供代码示例和指导意义。
Ember-timetree 简介
Ember-timetree 是一个基于 Ember.js 框架开发的树形时间轴可视化图表库。其作用是扩展用户界面的可视性和交互性，提供一种自然和易于理解的方式来展示过去、当前和未来事件。同时 timetree 还支持缩放、平移、依赖性和更新等功能。
安装 Ember-timetree
首先，你需要在你的 Ember JS 项目中安装 ember-timetree。在终端运行以下 npm 命令：
npm install --save ember-timetree
添加 Timetree 到组件
在您需要添加 timetree 的组件文件中，添加 ember-timetree 引用：
import Ember from 'ember';
import Timetree from 'ember-timetree/components/timetree';
export default Ember.Component.extend({
timetree: Timetree.create()
});接下来，在 HTML 文件中添加 timetree 组件：
{{timetree timetreeData=timetreeData}}在你的控制器或者某个地方给数据模型分配一些基本的数据（请根据您的数据模型调整如下内容）：
-- -------------------- ---- -------
------------- -
------ -
- ------ --- --- ------ -------------------- --------- ---- --------------- -------- --
- ------ --- --- ------ --------------- --------- ---- --------------- --------- ------ ------ --
- ------ --- --- ------ -------------------- --------- ---- -------------------- -------- --
- ------ --- --- ------ ---------------- --------- ---- ---------------- -------- --
--
----- -
------ -------------------- --------
---- --------------- -------
-
-此时你的 timetree 组件就已经成功添加到了你的 Ember JS 项目中。
timetree 组件 API
以下是一些 timetree 组件 API，它们可以让你配置和调整 timetree：
items
-- -------------------- ---- -------
------------- -
------ -
- ------ --- --- ------ -------------------- --------- ---- --------------- -------- --
- ------ --- --- ------ --------------- --------- ---- --------------- --------- ------ ------ --
- ------ --- --- ------ -------------------- --------- ---- -------------------- -------- --
- ------ --- --- ------ ---------------- --------- ---- ---------------- -------- --
--
----- -
------ -------------------- --------
---- --------------- -------
-
-使用数组作为 items 值来设置 timetree 的数据模型：每个项目都由 label（标签）、start（开始时间）和 end（结束时间）组成，color（颜色）是可选的。
zoom
-- -------------------- ---- -------
------------- -
------ -
- ------ --- --- ------ -------------------- --------- ---- --------------- -------- --
- ------ --- --- ------ --------------- --------- ---- --------------- --------- ------ ------ --
- ------ --- --- ------ -------------------- --------- ---- -------------------- -------- --
- ------ --- --- ------ ---------------- --------- ---- ---------------- -------- --
--
----- -
------ -------------------- --------
---- --------------- -------
-
-zoom 对象定义了 timetree 上当前视图的起始和结束时间。在这个例子中，我们将 timetree 的缩放范围设置为过去的两天和未来的两天。
visibleArea
-- -------------------- ---- -------
------------- -
------ -
- ------ --- --- ------ -------------------- --------- ---- --------------- -------- --
- ------ --- --- ------ --------------- --------- ---- --------------- --------- ------ ------ --
- ------ --- --- ------ -------------------- --------- ---- -------------------- -------- --
- ------ --- --- ------ ---------------- --------- ---- ---------------- -------- --
--
----- -
------ -------------------- --------
---- --------------- -------
--
------------ -
------ -------------------- -------
---- --------------- ------
-
-visibleArea 是另一个对象，它定义了当前 timetree 可见的区域。在此示例中，我们将 timetree 的可见区域缩小到过去的一天和未来的一天。
depItems
-- -------------------- ---- -------
------------- -
------ -
- ------ --- --- ------ -------------------- --------- ---- --------------- -------- --
- ------ --- --- ------ --------------- --------- ---- --------------- --------- ------ ------ --
- ------ --- --- ------ -------------------- --------- ---- -------------------- -------- --
- ------ --- --- ------ ---------------- --------- ---- ---------------- -------- --
--
--------- -
- --- -- ----- -- ------ --- -- --
- --- -- ----- -- ------ --- --- ------ ------- -
--
----- -
------ -------------------- --------
---- --------------- -------
-
-depItems 是一个数组，用于在 timetree 上显示依赖关系。在这个例子中，我们用 to 和 from 属性建立了两个依赖关系，我们还可以为依赖关系设置 label 和 color 属性。
onItemHover
-- -------------------- ---- -------
------------- -
------ -
- ------ --- --- ------ -------------------- --------- ---- --------------- -------- --
- ------ --- --- ------ --------------- --------- ---- --------------- --------- ------ ------ --
- ------ --- --- ------ -------------------- --------- ---- -------------------- -------- --
- ------ --- --- ------ ---------------- --------- ---- ---------------- -------- --
--
----- -
------ -------------------- --------
---- --------------- -------
--
------------ ---------- - ----------- -------------- ----- -
-onItemHover 是一个回调函数，用于处理项目上悬停事件。在这个例子中，当你在 timetree 上悬停时，会弹出一个警告框。
完整示例
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- -------------------------------------
------ ------- ------------------------
--------- ------------------
------------- -
------ -
- ------ --- --- ------ -------------------- --------- ---- --------------- -------- --
- ------ --- --- ------ --------------- --------- ---- --------------- --------- ------ ------ --
- ------ --- --- ------ -------------------- --------- ---- -------------------- -------- --
- ------ --- --- ------ ---------------- --------- ---- ---------------- -------- --
--
--------- -
- --- -- ----- -- ------ --- -- --
- --- -- ----- -- ------ --- --- ------ ------- -
--
----- -
------ -------------------- --------
---- --------------- -------
--
------------ -
------ -------------------- -------
---- --------------- ------
--
------------ ---------- - ----------- -------------- ----- -
-
---结论
Ember-timetree 是一个很棒的 npm 包，用于构建时间轴，它是基于 Ember.js 框架设计的。本文提供了 ember-timetree 的使用教程、代码示例以及 API 解释，你可以根据自己的需求来使用它。如有疑问，欢迎留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e19a563576b7b1ecbc2