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

【问题标题】：How to change the background color for each group in timeline using timevis in R如何使用 R 中的 timevis 更改时间轴中每个组的背景颜色
【发布时间】：2021-11-06 15:57:45
【问题描述】：

我正在尝试根据划分的组对基于 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

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

【问题讨论】：

标签： r shiny vis.js-timeline

【解决方案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。这是开发它的人的方式，我不能改变它。

【讨论】：