一.介绍
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中修改
时间轴可以通过滚轮和鼠标拖动放大缩小,更细致。
具体奇特功能要学会看文档哦!