避免在 sliderTextInput 中重叠文本答案

【问题标题】：Avoid overlapping text in sliderTextInput避免在 sliderTextInput 中重叠文本
【发布时间】：2019-12-21 23:58:21
【问题描述】：

我正在使用来自 shinyWidgets 包的sliderTextInput。我无法使标签可读。

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

我希望能够做到以下一项或两项：

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

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

这是一个精简的例子：

使用 sliderTextInput（标签重叠）

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”

【问题讨论】：

我在包上打开了一个问题：github.com/dreamRs/shinyWidgets/issues/213

标签： r shiny

【解决方案1】：

从提问者创建的shinyWidgets issue 中提取的解决方案（学分转到Victor Perrier）。

文本可以只用 CSS 进行 roteted。 .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)

【讨论】：