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

Question

如果我想今天只显示一项，则不显示任何内容，例如：（更改今天的日期）

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

Answer 1

链接的 CodePen 使用 vis.js v4.21.0，该版本于 2017 年 10 月发布，现在已根据https://github.com/almende/vis 弃用。 https://github.com/almende/vis/issues/3616 中描述的问题出现在此旧版本中。这会导致 visibility: hidden; 被添加到内联 CSS 的可视化元素中。

解决此问题的两种方法：

1。更新到 vis-timeline

从已弃用的 vis.js v4.21.0 更新到最新版本。在 vis.js 被贬值后，组件被拆分为单独的模块，时间轴的模块是 vis-timeline 在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'};