如何创建没有间隙的 vis.js 时间线答案

【问题标题】：How to create vis.js timeline without gaps如何创建没有间隙的 vis.js 时间线
【发布时间】：2018-03-25 13:27:10
【问题描述】：

我正在使用 vis.js 时间线 (http://visjs.org/docs/timeline/)。

我想实现元素之间不可能有间隙。

如果有人在其他元素之间移除一个元素并向间隙添加新元素，则新元素应自动适应间隙。
如果有人通过调整大小来更新元素的时间（大小），它也应该自动适应下一个元素。
我需要验证所有组中的所有元素都在给定日期范围内填充。

这些是我的可编辑选项：

 editable: {
     add: true,         // add new items by double tapping
     updateTime: true,  // drag items horizontally
     updateGroup: false, // drag items from one group to another
     remove: true,       // delete an item by tapping the delete button top right
     overrideItems: false  // allow these options to override item.editable
 },

不允许在组之间移动元素。

我的第一个猜测是使用onMove 函数，但我不知道如何找到上一个和下一个元素来调整开始和结束。

也许其他人遇到了同样的问题并找到了解决方案。

【问题讨论】：

如果我没记错的话，时间线元素应该可以用 CSS 完全自定义。您是否尝试过使用 CSS 而不是 JS 进行样式设置？
这不是样式问题，我使用时间线作为 UI 来创建/更新元素
啊。我明白你在说什么。抱歉，我没有解决办法。

标签： javascript vis.js vis.js-timeline

【解决方案1】：

我有一个类似的场景，拖动一个元素会重新排列所有其他元素，而将一个元素拖动到另一个组会使其紧随最后一个元素。

没有简单的选项可以设置来执行此操作。基本上你必须听这些事件并跟踪你的元素在哪里才能更新它。

例如，在您的第一种情况下，您必须做的是：

监听onAdd()事件
通过查看start 和end 时间，搜索将在其中创建新元素的该组的元素。
更新此新项目，使start 等于前一个元素的end，并使end 等于下一个元素的start。

这里有一个简单的 JS Fiddle 可以帮助您入门：http://jsfiddle.net/rj35mbvd/

在这个小提琴中，每次你尝试添加一个项目时，它都会被添加到时间轴中已经存在的两个元素之间。

【讨论】：

【解决方案2】：

这是一个很好的答案：

在stack: false + stackSubgroups: true的选项中使用，并且默认使用相同的子组，元素将内联显示；）

检查此html页面末尾的<script>http://visjs.org/examples/timeline/groups/subgroups.html

我将分享我正在制定的高级路线图；）

最好的

【讨论】：