【发布时间】:2015-01-08 09:20:20
【问题描述】:
默认情况下 visjs 在时间轴上显示每一天,是否可以仅显示事件日期?我的目标是制作一个像this one 这样的简单时间线。
有可能做到吗?还有其他替代库吗?
【问题讨论】:
标签: javascript jquery d3.js timeline vis.js
默认情况下 visjs 在时间轴上显示每一天,是否可以仅显示事件日期?我的目标是制作一个像this one 这样的简单时间线。
有可能做到吗?还有其他替代库吗?
【问题讨论】:
标签: javascript jquery d3.js timeline vis.js
要实现您所要求的内容非常简单,您希望如何对其进行定制以使其看起来尽可能接近参考将取决于您和所支持的内容。我已将 visjs 广泛用于我们目前正在构建的网络分析项目。
使用时间线 API,在初始化基本布局后。您可以简单地在您可能感兴趣的事件的时间线数据集中添加一些项目。
代码应该如下所示
var container = document.getElementById('element');
在任何事情之前,您首先需要直接在 HTML 或 JS 中创建一个元素。选择权在你。
然后您需要抓取该元素,以便可以直接在 Element 中显示所有内容。在这些最初的几个步骤之后,您将需要为时间线初始化数据集。数据集将用于保存您的数据值(项目),您可以在渲染图表后对数据集进行各种操作。
var items = new vis.DataSet([])
如果您想为时间线添加任何选项。
var options = {}
最后你有实际的时间线来创建
var timeline = new vis.Timeline(container, items, options);
现在您需要将几个项目添加到您之前创建的数据集中,这将是您想要标记的项目的来源。有一系列选项,从您希望它显示的内容到将发挥作用的项目的样式。
items.add([
{id: 1, text: 'item 1', date: new Date(2013, 6, 20), group: 1, first: true},
{id: 2, text: 'item 2', date: '2013-06-23', group: 2},
{id: 3, text: 'item 3', date: '2013-06-25', group: 2},
{id: 4, text: 'item 4'}
]);
这将是一种方法。您可以找到更多自定义选项,了解您希望这些项目的外观和行为here
希望这会有所帮助。
【讨论】: