如何隐藏timevis图表水平网格线并修改nestedGroups红色边框

针对你提出的两个需求，以下是具体的修改方案：

1. 隐藏水平网格线 #

timevis的水平网格线主要对应分组标签的底部边框，同时时间轴区域也存在水平分隔线，通过以下CSS可以完全隐藏：

/* 移除分组标签的底部边框 */
.vis-labelset .vis-label {
  border-bottom: none !important;
}
/* 隐藏时间轴区域的水平网格线 */
.vis-timeline .vis-grid.vis-horizontal {
  display: none;
}

2. 将嵌套组的红色边框改为黑色 #

默认嵌套组的红色边框来自.vis-group.vis-nested类，需要用优先级更高的选择器覆盖默认样式：

.vis-timeline .vis-group.vis-nested {
  border-color: black !important;
}

修改后的完整代码 #

将上述CSS整合到原代码中，完整可运行代码如下：

library(shiny)
library(timevis)

dataLog <- data.frame(
  content = c("1","2","Surgery","3","Status","Treatment","Chemotherapy","TMZ"),
  start   = c("5/1/2016","5/1/2017","5/1/2016","5/1/2018","5/1/2016","5/1/2016","5/1/2016","5/1/2016"),
  end     = c("5/1/2016","5/1/2017","5/1/2016","5/1/2018","5/1/2016","5/1/2020","5/1/2020","5/1/2020"),
  group   =c("Specimen","Specimen","Surgery"," Specimen","Status","Treatment","Chemotherapy","TMZ"),
  type    =c("point","point","point","point","point","range","range","range"),
  className = c("ab_style","ab_style","serg_style","mo_style","status_style","white_style","blue_style","ab_style")
)

dataLogGroups <- data.frame(
  id = c("Specimen", "Surgery", "Status", "Treatment","Chemotherapy", "TMZ"),
  content = c("Specimen", "Surgery", "Status", "Treatment", "Chemotherapy", "TMZ"),
  style = "font-weight: bold"
)
groups<-dataLogGroups
groups$nestedGroups <- I(list(NA, NA, NA, list("Chemotherapy", "TMZ"), NA, NA))

ui <- fluidPage(
  title = "Testing styles",
  tags$head(
    tags$style(HTML("   
                        .vis-timeline { border: 2px solid black; font-size: 10pt; background: #ffffff;}
                        .vis-item.vis-line {border-width: 3px;}
                        .vis-item.vis-dot {border-width: 6px;border-radius: 6px;}
                        .vis-background .vis-minor.vis-odd {background: #ffffff;}
                        .vis-time-axis .vis-grid.vis-minor {border-width: 0px;border-color: #ffffff;}
                        .vis-time-axis .vis-text {color: black;padding-top: 10px;padding-left: 10px;}
                        .vis-time-axis .vis-grid.vis-major {border-width: 0px;border-color: #ffffff;}
                        .mo_style  { border-color: #301934; font-size: 10pt; color: black;  }
                        .ab_style { border-color: #FFAA33; font-size: 10pt; color: black;   }
                        .serg_style { border-color: #B9D9EB; font-size: 10pt; color: black;   }
                        .status_style { border-color: #008B8B; font-size: 10pt; color: black;   }
                        .white_style { border-color: white; background:#ffffff; color: white;   }
                        .blue_style { border-color: #17B169; font-size: 10px; Background: #17B169; color: #17B169; }
                        /* 隐藏水平网格线 */
                        .vis-labelset .vis-label {
                          border-bottom: none !important;
                        }
                        .vis-timeline .vis-grid.vis-horizontal {
                          display: none;
                        }
                        /* 修改嵌套组边框为黑色 */
                        .vis-timeline .vis-group.vis-nested {
                          border-color: black !important;
                        }
                        "))),
  timevisOutput("timelineCustom")
)

server <- function (input, output, session) {
  output$timelineCustom <- renderTimevis ({
    timevis(dataLog,groups = groups,options = list(orientation = 'top',editable = FALSE))
  })
}
shinyApp(ui = ui, server = server)

关键说明 #

• 隐藏水平网格线：同时处理分组标签的底部边框和时间轴内的水平分隔线，确保无残留网格线。
• 修改嵌套组边框：使用!important提升样式优先级，确保覆盖timevis默认的红色边框样式。

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