相对时间线 - FORK
注: 这是这里发现的原始相对时间线的分叉: https://github.com/visjs/vis-timeline 互联网档案馆的存檔,存档日期2013-12-21
Timeline/Graph2D是一个交互可视化图表,用于及时可视化数据. 数据项可以在单个日期进行,或者有起始和结束日期(范围). 您可以在时间线上拖放并滚动, 在时间线上自由移动并缩放 。 项目可以在时间表中创建、编辑和删除。 轴上的时间尺度会自动调整,支持从毫秒到年的尺度.
标签
安装
通过 npm 安装 :
$ npm install vis-timeline
示例
下面是装入时间线的基本例子。 更多实例 发现于 示例目录 (b) 执行项目.
<!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>
构建
目前提供四栋建筑.
独立建设
<script
type="text/javascript"
src="https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"
></script>
import { Timeline } from "vis-timeline/standalone";
这一点没有依赖性,因此对于像MWE这样的人来说是巨大的,但是 更多的问题与互操作性和捆绑的bloat。 更多信息见 如下 实例。 。 。 .
同行构建
<script
type="text/javascript"
src="https://unpkg.com/vis-timeline@latest/peer/umd/vis-timeline-graph2d.min.js"
></script>
import { Timeline } from "vis-timeline/peer";
要工作,您必须加载 Vis 数据和运动( 包括 locales) 除英文外,你自己打包。 这里的优势在于它能很好地工作 其他软件包。 更多信息见以下 实例。 。 。 .
ESNext 构建
<script
type="text/javascript"
src="https://unpkg.com/vis-timeline@latest/esnext/umd/vis-timeline-graph2d.min.js"
></script>
import { Timeline } from "vis-timeline/esnext";
这与同行构建相同,但没有捆绑的依赖关系或 花粉酱 它的缩进 用于捆绑,例如滚出或Webpack 将获取依赖关系,防止捆绑中重复依赖关系,使用 转接器,用于添加必要的多填充等.
遗产建设
<script
type="text/javascript"
src="https://unpkg.com/vis-timeline@latest/dist/vis-timeline-graph2d.min.js"
></script>
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
贡献
对图书馆的贡献非常受欢迎! 我们不能一个人去!
备份
谢谢你所有的支持者
发起人
通过成为赞助者来支持这一项目。 你的标志会在这里出现 链接到你的网站.
许可证
版权(c) 2014-2017 Almende B.V. 和贡献者 版权 (c) 2017-2019 相对于贡献者
这项工作有双重许可证 阿帕奇 - 2.0 财务报告和审定财务报表 麻省理工学院。 。 。 . 你可以选择其中之一 如果你使用此作品.
SPDX-License-Identifier: Apache-2.0 OR MIT