Vis.js Timeline组背景色覆盖主次网格线问题求助

问题核心是Vis.js中.vis-group元素的层级高于网格线（.vis-grid），设置背景色后会完全遮挡网格。以下是两种可行的修复方案：

方案1：调整网格线的层级（z-index） #

通过CSS提升网格线的层级，让它显示在组背景之上：

/* 提升主次网格线的层级 */
.vis-time-axis .vis-grid {
  z-index: 1;
}

/* 保持组背景的样式 */
.vis-group.baseline {
  font-family: sans-serif;
  font-style: italic;
  font-size: 11pt;
  background-color: #b1a3a3;
}

方案2：仅给组的标题区域添加背景 #

如果不需要整个组行都有背景，只给组标题部分设置背景，避免遮挡网格：

/* 只给组的标题容器加背景 */
.vis-group.baseline .vis-group-content {
  font-family: sans-serif;
  font-style: italic;
  font-size: 11pt;
  background-color: #b1a3a3;
}

完整修改后的代码示例 #

JavaScript #

var groups = new vis.DataSet([
  { id: 0, content: 'Solution #0', value: 0, className: "baseline" },
  { id: 1, content: 'Solution #1', value: 1 },
]);
var items = new vis.DataSet([
  { id: 0, group: 0, content: 'AAA', start: new Date(2020, 04, 06), end: new Date(2020, 06, 01), type: 'range' },
  { id: 1, group: 0, content: 'BBB', start: new Date(2020, 04, 06), end: new Date(2020, 04, 06), type: 'point' },
  { id: 2, group: 0, content: 'CCC', start: new Date(2020, 06, 15), end: new Date(2021, 09, 22), type: 'range' },
  { id: 22, group: 1, content: 'AAA', start: new Date(2020, 04, 06), end: new Date(2020, 06, 01), type: 'range' },
  { id: 23, group: 1, content: 'BBB', start: new Date(2020, 06, 15), end: new Date(2021, 09, 22), type: 'range' },
  { id: 24, group: 1, content: 'CCC', start: new Date(2021, 09, 22), end: new Date(2021, 09, 27), type: 'range' },
]);

var container = document.getElementById('visualization');
var options = {};
var timeline = new vis.Timeline(container,items,groups,options);

CSS #

body,
html {
    font-family: sans-serif;
    background-color: black;
}
.vis-item .vis-item-overflow {
    overflow: visible;
}
/* 方案1的CSS（二选一即可） */
.vis-time-axis .vis-grid {
  z-index: 1;
}
.vis-group.baseline {
    font-family: sans-serif;
    font-style: italic;
    font-size: 11pt;
    background-color: #b1a3a3;
}
/* 方案2的CSS（二选一即可） */
/* .vis-group.baseline .vis-group-content {
    font-family: sans-serif;
    font-style: italic;
    font-size: 11pt;
    background-color: #b1a3a3;
} */
.baseline {
    font-family: sans-serif;
    font-style: italic;
    font-size: 11pt;
}
.vis-time-axis .vis-text {
    box-sizing: border-box;
    color: #ffffff;
    overflow: hidden;
    padding: 3px;
    position: absolute;
    white-space: nowrap
}
.vis-time-axis .vis-grid.vis-minor {
    border-color: #ececee
}

HTML #

<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis-timeline-graph2d.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<body>
  <div id="visualization"></div>
</body>

说明：方案1适合需要整个组行有背景的场景，方案2更轻量化，只给标题区域加背景，不会影响网格显示。根据你的需求选择即可。

内容的提问来源于stack exchange，提问作者jparanich