# @anderson-fv/vis-timeline 中文文档

规范地址：https://npmcn.com/package/%40anderson-fv/vis-timeline/

版本：1\.1\.0
npm 元数据更新时间：2024-04-09T19:30:52.499Z
中文译文更新时间：2026-11-06T02:46:17.642Z
软件包许可：\(Apache-2\.0 OR MIT\)

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40anderson-fv/vis-timeline
原文对照：https://npmcn.com/package/%40anderson-fv/vis-timeline/?lang=original
项目主页：https://visjs.github.io/vis-timeline/
源码仓库：https://github.com/ChrisAndersonFV/vis-timeline

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：39.7 MB，82 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@egjs/hammerjs ^2\.0\.0，component-emitter ^1\.3\.0，keycharm ^0\.2\.0 \|\| ^0\.3\.0 \|\| ^0\.4\.0，moment ^2\.24\.0，propagating-hammerjs ^1\.4\.0 \|\| ^2\.0\.0，uuid ^3\.4\.0 \|\| ^7\.0\.0 \|\| ^8\.0\.0 \|\| ^9\.0\.0，vis-data ^6\.3\.0 \|\| ^7\.0\.0，vis-util ^5\.0\.1，xss ^1\.0\.0
- 首次发布：2024-04-08T19:54:50.442Z
- 最新版本发布：2024-04-09T19:30:52.316Z
- 近 30 天下载量：6096（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

创建一个与项目和范围完全自定义的互动时间表.

## 安装

```sh
npm install @anderson-fv/vis-timeline
```

也可以使用：`pnpm add @anderson-fv/vis-timeline`、`yarn add @anderson-fv/vis-timeline`、`bun add @anderson-fv/vis-timeline`

## README

# 相对时间线 - FORK

**注:** 这是这里发现的原始相对时间线的分叉: [https://github.com/visjs/vis-timeline 互联网档案馆的存檔,存档日期2013-12-21](https://github.com/visjs/vis-timeline)

* * *

![example chart](https://npmcn.com/package/%40anderson-fv/vis-timeline/docs/img/timeline.png)

Timeline/Graph2D是一个交互可视化图表,用于及时可视化数据. 数据项可以在单个日期进行,或者有起始和结束日期(范围). 您可以在时间线上拖放并滚动, 在时间线上自由移动并缩放 。 项目可以在时间表中创建、编辑和删除。 轴上的时间尺度会自动调整,支持从毫秒到年的尺度.

## 标签

[![GitHub contributors](https://img.shields.io/github/contributors/visjs/vis-timeline.svg)](https://github.com/visjs/vis-timeline/graphs/contributors) [![GitHub stars](https://img.shields.io/github/stars/visjs/vis-timeline.svg)](https://github.com/almende/vis/stargazers)

[![Backers on Open Collective](https://opencollective.com/visjs/backers/badge.svg)](https://npmcn.com/package/%40anderson-fv/vis-timeline/#readme-backers) [![Sponsors on Open Collective](https://opencollective.com/visjs/sponsors/badge.svg)](https://npmcn.com/package/%40anderson-fv/vis-timeline/#readme-sponsors)

## 安装

通过 npm 安装 :

```
$ npm install vis-timeline
```

## 示例

下面是装入时间线的基本例子。 更多实例 发现于 [示例目录](https://github.com/visjs/vis-timeline/tree/master/examples/) (b) 执行项目.

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Timeline</title>
    <script
      type="text/javascript"
      src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"
    ></script>
    <link
      href="https://unpkg.com/vis-timeline@latest/styles/vis-timeline-graph2d.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <style type="text/css">
      #visualization {
        width: 600px;
        height: 400px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <div id="visualization"></div>
    <script type="text/javascript">
      // DOM element where the Timeline will be attached
      var container = document.getElementById("visualization");

      // Create a DataSet (allows two way data-binding)
      var items = new vis.DataSet([
        { id: 1, content: "item 1", start: "2014-04-20" },
        { id: 2, content: "item 2", start: "2014-04-14" },
        { id: 3, content: "item 3", start: "2014-04-18" },
        { id: 4, content: "item 4", start: "2014-04-16", end: "2014-04-19" },
        { id: 5, content: "item 5", start: "2014-04-25" },
        { id: 6, content: "item 6", start: "2014-04-27", type: "point" },
      ]);

      // Configuration for the Timeline
      var options = {};

      // Create a Timeline
      var timeline = new vis.Timeline(container, items, options);
    </script>
  </body>
</html>
```

## 构建

目前提供四栋建筑.

### 独立建设

```html
<script
  type="text/javascript"
  src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"
></script>
```

```javascript
import { Timeline } from "vis-timeline/standalone";
```

这一点没有依赖性,因此对于像MWE这样的人来说是巨大的,但是 更多的问题与互操作性和捆绑的bloat。 更多信息见 如下 [实例](https://visjs.github.io/vis-timeline/examples/timeline/standalone-build.html)。 。 。 .

### 同行构建

```html
<script
  type="text/javascript"
  src="https://unpkg.com/vis-timeline@latest/peer/umd/vis-timeline-graph2d.min.js"
></script>
```

```javascript
import { Timeline } from "vis-timeline/peer";
```

要工作,您必须加载 Vis 数据和运动( 包括 locales) 除英文外,你自己打包。 这里的优势在于它能很好地工作 其他软件包。 更多信息见以下 [实例](https://visjs.github.io/vis-timeline/examples/timeline/peer-build.html)。 。 。 .

### ESNext 构建

```html
<script
  type="text/javascript"
  src="https://unpkg.com/vis-timeline@latest/esnext/umd/vis-timeline-graph2d.min.js"
></script>
```

```javascript
import { Timeline } from "vis-timeline/esnext";
```

这与同行构建相同,但没有捆绑的依赖关系或 花粉酱 它的缩进 用于捆绑,例如滚出或Webpack 将获取依赖关系,防止捆绑中重复依赖关系,使用 转接器,用于添加必要的多填充等.

### 遗产建设

```html
<script
  type="text/javascript"
  src="https://unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js"
></script>
```

```javascript
import { Timeline } from "vis-timeline";
```

仅用于后向兼容 。 它已经腐化了,并且将会 如果有 URL ,则删除,如果有 URL ,则取而代之 节点.js/bundlers. 请不要用这个.

## 构建

要从源头构建库, 请从 github 复制工程

```
$ git clone git://github.com/visjs/vis-timeline.git
```

源代码使用节点(需要和模块.exports)的模块样式以 组织依赖关系。 为了安装所有附属物并建造图书馆, 运行 `npm install` 在项目根部.

```
$ cd vis-timeline
$ npm install
```

然后,项目可以构建运行:

```
$ npm run build
```

### 不包括外部依赖

外部依赖性, 如瞬间, hammerjs 可以通过运行排除在构建中 :

```
$ npm run build -- -e [comma separated module names]
```

示例

```
$ npm run build -- -e moment,hammerjs
```

## 测试

为测试库, 安装项目依赖性一次 :

```
$ npm install
```

然后进行测试:

```
$ npm run test
```

## 贡献

对图书馆的贡献非常受欢迎! 我们不能一个人去!

### 备份

谢谢你所有的支持者

[![](https://opencollective.com/visjs/backers.svg?width=890)](https://opencollective.com/visjs#backers)

### 发起人

通过成为赞助者来支持这一项目。 你的标志会在这里出现 链接到你的网站.

[![](https://opencollective.com/visjs/sponsor/0/avatar.svg)](https://opencollective.com/visjs/sponsor/0/website) [![](https://opencollective.com/visjs/sponsor/1/avatar.svg)](https://opencollective.com/visjs/sponsor/1/website) [![](https://opencollective.com/visjs/sponsor/2/avatar.svg)](https://opencollective.com/visjs/sponsor/2/website) [![](https://opencollective.com/visjs/sponsor/3/avatar.svg)](https://opencollective.com/visjs/sponsor/3/website) [![](https://opencollective.com/visjs/sponsor/4/avatar.svg)](https://opencollective.com/visjs/sponsor/4/website) [![](https://opencollective.com/visjs/sponsor/5/avatar.svg)](https://opencollective.com/visjs/sponsor/5/website) [![](https://opencollective.com/visjs/sponsor/6/avatar.svg)](https://opencollective.com/visjs/sponsor/6/website) [![](https://opencollective.com/visjs/sponsor/7/avatar.svg)](https://opencollective.com/visjs/sponsor/7/website) [![](https://opencollective.com/visjs/sponsor/8/avatar.svg)](https://opencollective.com/visjs/sponsor/8/website) [![](https://opencollective.com/visjs/sponsor/9/avatar.svg)](https://opencollective.com/visjs/sponsor/9/website)

## 许可证

版权(c) 2014-2017 Almende B.V. 和贡献者 版权 (c) 2017-2019 相对于贡献者

这项工作有双重许可证 [阿帕奇 - 2.0](https://npmcn.com/package/%40anderson-fv/vis-timeline/LICENSE.Apache-2.0.txt) 财务报告和审定财务报表 [麻省理工学院](https://npmcn.com/package/%40anderson-fv/vis-timeline/LICENSE.MIT.txt)。 。 。 . 你可以选择其中之一 如果你使用此作品.

`SPDX-License-Identifier: Apache-2.0 OR MIT`

## 常见问题

### @anderson-fv/vis-timeline 是什么？

创建一个与项目和范围完全自定义的互动时间表\.

### 如何安装 @anderson-fv/vis-timeline？

在项目目录运行 npm install @anderson-fv/vis-timeline，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@egjs/hammerjs（^2\.0\.0）、component-emitter（^1\.3\.0）、keycharm（^0\.2\.0 \|\| ^0\.3\.0 \|\| ^0\.4\.0）、moment（^2\.24\.0）、propagating-hammerjs（^1\.4\.0 \|\| ^2\.0\.0）、uuid（^3\.4\.0 \|\| ^7\.0\.0 \|\| ^8\.0\.0 \|\| ^9\.0\.0）、vis-data（^6\.3\.0 \|\| ^7\.0\.0）、vis-util（^5\.0\.1）、xss（^1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @anderson-fv/vis-timeline 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @anderson-fv/vis-timeline 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @anderson-fv/vis-timeline 可以商用吗？

@anderson-fv/vis-timeline 使用 \(Apache-2\.0 OR MIT\) 许可。可在 Apache-2\.0、MIT 中任选其一遵守。选择 Apache-2\.0 时，宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @anderson-fv/vis-timeline 的下载量有多少？

根据 npm 官方下载统计，@anderson-fv/vis-timeline 在 2026/10/06 – 2026/11/04 这 30 天内被下载 6,096 次，日均约 203 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @anderson-fv/vis-timeline 还在维护吗？

最新版本 1\.1\.0 发布于 2024/04/10（2 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/04/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。