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'};