代码之家  ›  专栏  ›  技术社区  ›  anorlondo

带ggplotly的闪亮仪表板中的响应式情节标题

  •  0
  • anorlondo  · 技术社区  · 2 年前

    我有一个流动的仪表板,里面有很多在ggplot中创建的图形,然后渲染为ggplotly对象。问题在于,在较小的屏幕或最小化的窗口上, sometimes the plot titles are cut off

    有没有一种方法可以根据屏幕宽度动态包装绘图标题,可能使用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)
    
    0 回复  |  直到 2 年前
        1
  •  1
  •   Shafee ikashnitsky    2 年前

    一种方法可以是使用 h4 标记而不是绘图标题,同时换行 h4 plotlyOutput 具有 column(fluidRow(...) 制作一个响应性的情节标题并对齐情节 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")
          )
        )
      )
    )
    
    

    然后,无论你的屏幕有多窄,你都会有一个响应的标题。

    服务器代码保持不变。