Vis.js 组背景样式

Question

我在一个 Angular5 项目中有一个 Vis.js 时间轴，其中包含三个组，每个组中有多个 items/events。我想出了如何分别设置每个组背景的样式以使交替泳道更加明显，方法是：

.vis-background>.vis-group:nth-of-type(even) { 
    // there is an auto-generated empty group as the first .vis-group, so starting with the 2nd group
  background-color: $gray-lighter;
}

.vis-labelset>.vis-label:nth-of-type(odd) {
  background-color: $gray-lighter;
}

但是，在灰色组中，垂直背景网格线不再可见。就好像组背景颜色分层在网格线的顶部。如果我将 z-index: 1; 添加到 .vis-vertical 或 .vis-grid，线条和组颜色会正确显示，但我会失去时间线缩放和移动功能。如何将样式应用于组、保持垂直网格线可见并保持所有时间线功能？

Answer 1

我使用的一个变通办法没有解决问题，但让它不那么臭名昭著，是这样定义组的：

group=
{
    id : 0,
    content : 'My Group',
    style : "background: rgba(82, 226, 233, 0.2);"
};

并像这样定义一个背景项

background_item=
{
    group : 0,
    start : '2018-10-29 00:00',
    end : '2018-10-30 02:00',
    type : 'background',
    className : 'myClassName'
};

类名的来源：

.vis-item.vis-background.myClassName {
    background-color: rgba(82, 226, 233, 0.2);
}

它使用透明度来防止隐藏垂直线。

结果是这样的：

希望对找到最终解决方案的人有所帮助。

Vis.js 组背景样式

Vis.js group background styling

css

sass

vis.js

vis.js-timeline