Question

我在Angular5项目中有一个Vis.js时间轴，其中有三个组，每个组中都有多个项目/事件。我想出了如何通过以下方式分别设置每个组背景的样式，以使交替的泳道更加鲜明：

.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'
};

className来自以下样式：

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

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

结果是这样的：

winrar2

希望当有人找到确定的解决方案时会有所帮助。

Vis.js组背景样式

1 个答案: