如何更改 vis.js 时间轴的垂直边距？

Question

在 vis.js 时间轴的每一行中有 5px 的边距。这以编程方式设置为内联样式：每行的 height 由库指定，行中每个项目的 top 位置和 transform 也是如此。

这意味着您自己设置这些值（例如，使用 item.style = 'top: 0'）会失败，因为它们会立即被 vis.js 覆盖。

我该如何更改这个保证金？

Answer 1

你试过!important了吗？示例：top: 0 !important;

这将确保此属性不会被覆盖。

Answer 2

https://visjs.github.io/vis-timeline/docs/timeline/#Configuration_Options 的 vis-timeline 选项列表中描述的边距选项可用于调整边距。

例如，下面的示例将项目的水平和垂直边距设置为 0 像素。它还将轴边距设置为 5 像素，以将项目放置在更靠近时间轴的位置。

var options = {
    margin : { 
        item: {horizontal:0, vertical:0},
        axis: 5       
    }
};

CSS 可用于更改项目的高度。

.vis-box {
  height: 20px;
}
.vis-range {
  height : 20px;
}

将这些设置用于紧凑视图的完整示例：

// 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-20" },
  { id: 2, content: "item 2", start: "2021-12-14" },
  { id: 3, content: "item 3", start: "2021-12-18" },
  { id: 4, content: "item 4", start: "2021-12-16", end: "2021-12-19" },
  { id: 5, content: "item 5", start: "2021-12-25" },
  { id: 6, content: "item 6", start: "2021-12-27", type: "point" },
]);

// Configuration for the Timeline
var options = {
    margin : { 
        item: {horizontal:0, vertical:0},
        axis: 5       
    }
};

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

body,
html {
  font-family: sans-serif;
}
.vis-box {
  height: 20px;
}
.vis-range {
  height : 20px;
}
.vis-item {
  font-size: 12px;
}

<script src="https://visjs.github.io/vis-timeline/standalone/umd/vis-timeline-graph2d.min.js"></script>
<link href="https://visjs.github.io/vis-timeline/styles/vis-timeline-graph2d.min.css" rel="stylesheet"/>

<div id="visualization"></div>

如何更改 vis.js 时间轴的垂直边距？

How do you change the vertical margin in a vis.js timeline?

javascript

css

timeline

vis.js