Vis.js 时间线不只显示今天的一项

Vis.js Timeline not showing only one today item

如果我只想显示今天的一项,则不会显示任何内容,例如:(更改今天的日期)

// 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: '2021-12-16'},
]);

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

// Create a Timeline
var timeline = new vis.Timeline(container, items, options);

示例码笔:https://codepen.io/nuno-soares-the-scripter/pen/xxXqvLP

链接的 CodePen 使用的是 vis.js v4.21.0,该版本于 2017 年 10 月发布,现在已弃用,因为 https://github.com/almende/vis. The issue described at https://github.com/almende/vis/issues/3616 出现在这个旧版本中。这导致 visibility: hidden; 被添加到内联的可视化元素 CSS.

两种解决方法:

1。更新到 vis-timeline

从已折旧的 vis.js v4.21.0 更新到最新版本。在 vis.js 折旧后,组件被拆分为单独的模块,时间线的模块在 https://github.com/visjs/vis-timeline.

的时间线。

根据 GitHub 示例,应更新 JavaScript 和 CSS 来源。在 CodePen 上更新这些显示时间线。

<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。设置开始日期

如果您不能使用 vis-timeline 并且必须保留此折旧版本,则向选项对象添加开始日期也会显示时间线。

var options = {start:'2021-12-16'};