一.介绍

Vis.js 是一个动态的基于浏览器的可视化库，特点是易用，可处理大量的动态数据，并与这些数据进行交互操作。该库包含 DataSet, Timeline, and Graph。这里主要介绍Timeline(时间轴)。

官方地址：vis.js

1.第一步，下载引入组件，可直接用网上地址：

"https://unpkg.com/vis-timeline@latest/standalone/umd/vis-timeline-graph2d.min.js"，js直接引入就可以

<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" />

2.配置组件：

（1）定义展示区域：

给需要展示的区域设置id为visualization。

（2）设置展示范围：

（3）接下来就是配置项了：

首先获取展示区域：

 var container = document.getElementById('visualization');

然后配置items（横轴展示数据）：

先创建数据实例，里面是一个数组，数组里每一个对象代表一个任务数据。

id：每条数据唯一的标识。

content:表示任务快内容。

start：起始时间，格式可看官网文档自己改喜欢的。

end：结束时间。

type：数据类型，有四个数据类型 'box' (default), 'point', 'range', or 'background'，详细内容可看文档

group：表示纵坐标分组。可把横坐标分组在同一行。

groups：对应的纵坐标数据。

options：配置项

    // Configuration for the Timeline

    const options = {

        orientation: 'top',//表示横坐标位置在上方

  editable: true,//表示可以拖动方块

//表示拖动后的位置

  onMove: function (item, callback) {

    // 在这里处理事件拖动

    // item 包含拖动的事件的信息

    // callback 用于完成拖动后的处理

    // 例如，你可以在此处验证拖动的位置是否有效，并调整事件的位置

    callback(item); // 调用 callback 完成拖动

  },

};

最后创建时间轴实例

  var timeline = new vis.Timeline(container, items, options,groups);

最后效果：

任务快颜色可以配置style在items中修改

时间轴可以通过滚轮和鼠标拖动放大缩小，更细致。

具体奇特功能要学会看文档哦！