带有ggplotly的shiny仪表板中的响应式plot标题

Question

我有一个流畅的仪表板，其中包含在 ggplot 中创建的大量图形，然后呈现为 ggplotly 对象。 问题是在较小的屏幕或最小化的 windows 上，有时 plot 标题会被截断。

有没有办法根据屏幕宽度动态包装 plot 标题，可能使用 str_wrap()？

我在下面包含了一个可重现的示例：

library(shiny)
library(tidyverse)
library(plotly)

ui <- fluidPage(
  
  fluidRow(
    column(
      width = 4,
      plotlyOutput("plot1")
    ),
    column(
      width = 4,
      plotlyOutput("plot2")
    ),
    column(
      width = 4,
      plotlyOutput("plot3")
    )
  )
)


server <- function(input, output) {

  output$plot1 <- renderPlotly({
    x <- mtcars %>%
      ggplot(
        aes(
          x = cyl,
          y = hp,
          fill = wt
        )
      ) +
      geom_point() +
      labs(title = "My very, very, very long title number 1")
    
    
    ggplotly(x)
  })
  
  output$plot3 <- renderPlotly({
    x <- mtcars %>%
      ggplot(
        aes(
          x = cyl,
          y = hp,
          fill = wt
        )
      ) +
      geom_point() +
      labs(title = "My very, very, very long title number 2")
    
    
    ggplotly(x)
  })
  
  
  output$plot2 <- renderPlotly({
    x <- mtcars %>%
      ggplot(
        aes(
          x = cyl,
          y = hp,
          fill = wt
        )
      ) +
      geom_point() +
      labs(title = "My very, very, very long title number 3")
    
    
    ggplotly(x)
  })
  
}

# Run the application 
shinyApp(ui = ui, server = server)

Answer 1

一种方法是使用h4标签而不是 plot 标题，用column(fluidRow(...)包装h4和plotlyOutput以制作响应式 plot 标题并很好地对齐 Z32FA6E1B78A9D402AA4893 和h4 。

library(shiny)
library(tidyverse)
library(plotly)

ui <- fluidPage(
  
  fluidRow(
    column(
      width = 4,
      column(
        width = 12,
        fluidRow(
          column(width = 1, HTML("&nbsp;")),
          column(
            width = 11,
            h4("My very, very, very long title number 1")
          )
        ),
        plotlyOutput("plot1")
      )
    ),
    column(
      width = 4,
      column(
        width = 12,
        fluidRow(
          column(width = 1, HTML("&nbsp;")),
          column(
            width = 11,
            h4("My very, very, very long title number 2")
          )
        ),
        plotlyOutput("plot2")
      )
    ),
    column(
      width = 4,
      column(
        width = 12,
        fluidRow(
          column(width = 1, HTML("&nbsp;")),
          column(
            width = 11,
            h4("My very, very, very long title number 3")
          )
        ),
        plotlyOutput("plot3")
      )
    )
  )
)

然后，无论您的屏幕有多窄，您都将拥有一个响应式标题。

服务器代码保持不变。