避免在 sliderTextInput 中重叠文本

Question

我正在使用sliderTextInputshinyWidgets 包。我无法使标签可读。

首先，它们太小了，我已经使用 css 修复了这个问题。但是，现在标签重叠，因此很难阅读它们。

我希望能够执行以下一项或两项操作：

• 将文本倾斜 45 或 90 度，这样标签就不会重叠。

• 减少标签数量，以便它们之间有更多空间。我尝试在choices =参数中执行此操作，但这会阻止选择这些选项。我认为这可能与文本而不是数字有关，因此这可能使这成为不可能。

我曾尝试使用sliderInput，但这会带来不同的问题。我几乎用这个答案让它工作了，但另一个问题是我有输入服务器端，作为 a 输入uiOutput，这是我无法改变的，因为它对不同的元素很重要。这种方法不适用于链接的解决方案 - 我最终得到了足够好的标签，但休息时间是每天而不是每月。

这是一个精简的例子：

使用滑块文本输入（标签重叠）

library(shinydashboard)
library(shinyWidgets)
library(shiny)


ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
   tags$head(tags$style(type = "text/css", ".irs-grid-text {font-size: 12pt !important;")),
    fluidRow(
      box(uiOutput("month_selection"))
      )
    )
  )

server <- function(input, output) {
  output$month_selection <- renderUI({
    sliderTextInput(
      inputId = "month_select",
      label = "",
      grid = TRUE, 
      force_edges = TRUE,
      choices = seq(from = as.Date("2017-01-01"), to = as.Date("2019-12-31"),by = 30)
    )
  })

}

shinyApp(ui, server)

使用滑块输入（不运行）

library(shinydashboard)
library(shinyWidgets)
library(shiny)

monthStart <- function(x) {
  x <- as.POSIXlt(x)
  x$mday <- 1
  as.Date(x)
}

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
   tags$head(tags$style(type = "text/css", ".irs-grid-text {font-size: 12pt !important;")),
    fluidRow(
      box(uiOutput("month_selection"))
      )
    )
  )

server <- function(input, output) {

  output$month_selection <- renderUI({
    sliderInput(
      inputId = "month_select",
      label = "",
      min = as.Date("2017-01-01"),
      max = as.Date("2019-12-31"),
      value = as.Date("2019-12-31"),
      timeFormat = "%b %Y",
      animate = TRUE
    )
  })

  sliderMonth <- reactiveValues()
  observe({
    sliderMonth$Month <- as.character(monthStart(input$month_select))
  })

}

shinyApp(ui, server)

> Warning: Error in as.POSIXlt.default: do not know how to convert 'x' to class “POSIXlt”

Answer 1

解决方案（由Victor Perrier提供）取自提问者创建的闪亮Widgets 问题。

只需 CSS 即可旋转文本。该类.irs-grid-text标识 sliderTextInput 小部件的标签。可以旋转transform文本，使其不重叠。

library(shinydashboard)
library(shinyWidgets)
library(shiny)


ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$head(tags$style(
      type = "text/css", 
      ".irs-grid-text {font-size: 12pt !important; transform: rotate(-90deg) translate(-30px);"
    )),
    fluidRow(
      box(uiOutput("month_selection"), height = "200px")
    )
  )
)

server <- function(input, output) {
  output$month_selection <- renderUI({
    sliderTextInput(
      inputId = "month_select",
      label = "",
      grid = TRUE, 
      force_edges = TRUE,
      choices = seq(from = as.Date("2017-01-01"), to = as.Date("2019-12-31"), by = 30)
    )
  })
}

shinyApp(ui, server)