如何使用 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)

输出结果如下：

Achievable Output

但是，我希望输出类似于

Desired Output

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

Answer 1

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

中进行

将相同颜色的行放在一起，使用,分隔选择器。 .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，开发者是这样的，我可以'改变它。

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

How to change the background color for each group in timeline using timevis in R

r

shiny

vis.js-timeline