问题标签 [vis.js-timeline]

我正在使用以下代码将内容传递给一组项目：

const nArray = data.abs.map((abs, index) => ({id: index + 1, content: abs.Des[0], start: abs.time, title: abs.Trace, end: null, group: 1}))

但是，现在只有数组中的第一项显示在时间轴上。内容如下：

在显示中，如何在时间轴的一个选项卡中显示所有项目？

更新：

控制台日志显示正确的结构，但收到此错误：

项目 [object Object] 中缺少属性“start”

const nArray = data.abs.map((abs, index) => abs.Event.map((Event, index) =>({id: index + 1, content: Event, start: abs.timestamp, title: abstraction.Trace, end: null, group: 1})))

第二次更新

下面的代码现在有这个错误，它似乎来自 vis.js 库，但我不确定它的含义：

未捕获的类型错误：i 不是函数

const nArray = data.abs.map((abs, index) => ({id: index + 1, content: abs.Event.map((Event, index) => ({id: index + 1, Event})), start: abs.timestamp, title: abs.Trace, end: null, group: 1}))

我有一个问题nestedGroups。items我在创建和创建之前对数组进行排序，nestedGroups但即便如此，由于某种原因，我还是在时间线的最后一个位置获得了第一个项目。

这是我的问题的屏幕截图。该activity_9项目需要在activity_10项目之前。我很困惑，因为在上面的组中，顺序nestedGroups是好的。谁能帮助我。谢谢你。

如何将负日期添加到时间线？我目前的代码是：

要将事件添加到时间线，我只需将其添加到items：

如果我缩小时间线，我会看到它显示第一年之前的日期。如何将事件添加到负日期，而无需拖动事件？

上面将结果显示为：["item1","item2","itme3"]。但是，我想要这样：

我试过了.split()，但 React 说它.split()不是一个函数。我也试过JSON.stringify(abs.event, null 2)，但它确实有效。任何帮助将不胜感激。

我正在使用 vis.js 显示具有连续非堆叠项目的时间线。

有些项目的内容比其他项目长，我希望同一组中的所有项目都具有相同的高度。

内容是动态的，因此我无法在选项中提供固定的最小或最大高度。

https://jsfiddle.net/jschmitz/13suvyp8/12/

“背景”类型接近我想要的，但该项目不再可点击。

我试图调整 CSS 属性，但项目的 top 属性是动态计算的，我没有找到处理所有内容的规则。

我希望能够通过单击组标题（或其旁边的图标等）折叠或切换时间轴上特定组的可见性

我见过的所有实现类似功能的示例都需要使用嵌套组，然后折叠组，但嵌套模型不适用于我们的数据，我们只想一次折叠一个。

我已经想出了如何通过设置类名在初始化时将组显示为折叠，但我还没有想出如何在组标签+行上动态切换类名。

除了与时间线视图中的项目进行实际时间映射之外，有没有一种方法可以让项目按照时间戳的顺序按时间顺序排列。此功能将帮助我消除时间戳差异较大的项目之间的差距。

例如 E1：1 E2：6 E3：9

当前时间线视图将其表示为

[1 - E1] 2 3 4 5 [6 - E2] 7 8 [9 - E3]

我想要的是时间顺序

[1 - E1] [2 - E2] [3 - E3]

我有一个时间线，其中有 3 个子组 1、2 和 3。在子组 2 中，我有 2 个项目，名为“B”和“BB”。我使用自定义子组排序创建了时间线。在输出中，我得到 BB 在顶部，然后是 BB 下面的项目 A 和 C，最后是 B，即使 BB 和 B 共享相同的子组 2。我想要的是，A 位于顶部，然后B 和 BB 在 A 下方聚集在一起，最后是 C。基本上，我希望子组总是看起来像一个集群，并在时间轴上在一起。

链接到非工作示例 -演示

HTML

JS

任何帮助将不胜感激。

我的图表看起来不错，但所有项目都有相同的颜色。我在时间线上有三种类型的数据，我试图弄清楚如何根据字符串值为不同的组分配不同的颜色。

例如，所有具有“.txt”文件扩展名的项目我都会是黄色的。然后所有具有“.tnt”文件扩展名的项目我想是红色的。最后，所有带有“.doc”的项目我都希望是绿色的。

现在下面的代码显示时间轴上的所有项目，但所有项目都是一种颜色。

更新：19 年 1 月 11 日

错误：无法读取未定义的属性“事件”。

我正在从服务器请求数据，然后尝试将其分配给items. console.log 显示正确的数据，但出现错误：Failed prop type: Invalid props 'items' of type 'object supplied to Timeline, expected array'. I thoughtitems.add` 将数据集转换为数组？

数据：