如何使用R语言timevis包修改时间线各分组背景色并移除网格线

API 探路者

2026-10-5

实现方案

你需要修改groups数据结构并补充对应的CSS样式即可实现分组背景着色+隐藏网格线，核心修改点如下：

给groups数据框新增className字段，为每个分组绑定专属样式类
补充针对时间线分组行的CSS规则，同时添加隐藏网格线的样式

完整修改后代码如下：

library(shiny)
library(timevis)
library(lubridate)

timevisData <- data.frame (
  id          = 1:3,
  content     = c("Klep", "Reinigen", "Zeeppomp"),
  group       = c("Klep", "Reinigen", "Zeeppomp"),
  start       = c("2020-12-10", "2020-12-16", "2020-12-30"),
  end         = NA,
  className   = c("green_style", "green_style", "red_style")
)

# 给groups新增className列，绑定对应背景样式
groups <- data.frame(
  id = c("Klep", "Reinigen", "Zeeppomp"), 
  content = c("Klep", "Reinigen", "Zeeppomp"),
  className = c("green_group", "green_group", "red_group")
)

ui <- fluidPage(
  title = "Testing with className",
  h3("Overzicht uitgevoerde en voorgestelde onderhoudsbeurten"),
  tags$head(
    tags$style(HTML("
      /* 原有时间点样式 */
      .red_style   { border-color: red; color: white; background-color: red; }
      .green_style { border-color: green; color: white; background-color: green; }
      /* 新增分组背景样式 */
      .vis-group.red_group { background-color: #ffcccc; }
      .vis-group.green_group { background-color: #ccffcc; }
      /* 隐藏网格线 */
      .vis-grid.vis-vertical, .vis-grid.vis-horizontal { display: none; }
    "))
  ),
  timevisOutput("timeline_aalst")
)

server <- function (input, output, session) {
  output$timeline_aalst <- renderTimevis ({
    timevis (data = timevisData, groups = groups, showZoom = TRUE, options = list(editable = TRUE)) %>%
      setWindow(Sys.Date() %m-% months(1), Sys.Date() %m+% months(1))
  })
}

shinyApp(ui = ui, server = server)