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

Question

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

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

如何更改此边距？

Answer 1

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

例如，下面将项目的水平和垂直边距设置为 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>

Answer 2

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

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