r - 如何使用 R 中的 timevis 更改时间轴中每个组的背景颜色

Question

我正在尝试根据划分的组对基于 timevis 的时间线的背景进行颜色编码。我可以看到可以根据组对点进行颜色编码，但我需要对背景进行颜色编码。正如您在下面的代码中看到的，它将相应地改变点的颜色。

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 <- data.frame(
  id = c("Klep", "Reinigen", "Zeeppomp"), 
  content = c("Klep", "Reinigen", "Zeeppomp")
)

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; }
                    "))
    ),
  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)

输出如下：

可实现的输出

但是，我希望输出类似于

期望的输出

此外，如果可以删除网格线，那也很棒！

Answer 1

我们可以使用一些高级 CSS 选择器来完成这项工作。因此，我们不是在数据框中指定组颜色，而是在 CSS 中进行。

将具有相同颜色的行保持在一起，并用于,分隔选择器。Number inside.vis-group:nth-of-type(N)表示行号。它要求你知道一个组将去哪一行。如果没有特殊情况，第一组将转到第一行，第二组将转到第二行，等等。

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
)

groups <- data.frame(
    id = c("Klep", "Reinigen", "Zeeppomp"), 
    content = c("Klep", "Reinigen", "Zeeppomp")
)

ui <- fluidPage(
    title = "Testing with className",
    h3("Overzicht uitgevoerde en voorgestelde onderhoudsbeurten"),
    timevisOutput("timeline_aalst"),
    tags$style(HTML("
        /*green*/
        .vis-foreground .vis-group:nth-of-type(1),
        .vis-foreground .vis-group:nth-of-type(2)
        {border-color: green; color: white; background-color: green;}
        
         /*red*/
        .vis-foreground .vis-group:nth-of-type(3){ border-color: red; color: white; background-color: red; }
    "))
)

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)

所以这会将颜色添加到前景中，您可以看到它覆盖了将标签连接到时间轴的线条。

为了仍然显示时间线，我们可以将颜色添加到背景中，因此您需要使用以下样式：

    tags$style(HTML("
        /*green*/
        .vis-background .vis-group:nth-of-type(2),
        .vis-background .vis-group:nth-of-type(3)
        {border-color: green; color: white; background-color: green;}
        
         /*red*/
        .vis-background .vis-group:nth-of-type(4){ border-color: red; color: white; background-color: red; }
    "))

注意背景的行号是行号 + 1: N + 1，例如第一行1 + 1 = 2不是 1。开发它的人就是这样，我无法更改它。