帶有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")
      )
    )
  )
)

然后，無論您的屏幕有多窄，您都將擁有一個響應式標題。

服務器代碼保持不變。