Sidopanelslayouter

Layoutfunktioner gör det möjligt att ordna indata och utdata visuellt i användargränssnittet. En välvald layout gör en Shiny-app mer tilltalande och förbättrar också användarupplevelsen.

I den här övningen ska du ändra layouten i en Shiny-app där användare kan utforska populariteten hos trendiga namn. Din färdiga app ska visuellt likna den här:

En app där namnväljaren visas i den vänstra sidopanelen, medan grafen visas till höger i huvudpanelen

Den här övningen är en del av kursen

Bygg webbapplikationer med Shiny i R

Visa kurs

Övningsinstruktioner

Ändra layouten i appen så att namnväljaren visas i sidopanelen och att diagrammet och tabellen visas till höger.

Interaktiv övning med praktiskt arbete

Testa den här övningen genom att slutföra den här exempelkoden.

ui <- fluidPage(
  # MODIFY CODE BELOW: Wrap in a sidebarLayout
    # MODIFY CODE BELOW: Wrap in a sidebarPanel
    selectInput('name', 'Select Name', top_trendy_names$name),
    # MODIFY CODE BELOW: Wrap in a mainPanel
    plotly::plotlyOutput('plot_trendy_names'),
    DT::DTOutput('table_trendy_names')
)

# DO NOT MODIFY
server <- function(input, output, session){
  # Function to plot trends in a name
  plot_trends <- function(){
     babynames %>% 
      filter(name == input$name) %>% 
      ggplot(aes(x = year, y = n)) +
      geom_col()
  }
  output$plot_trendy_names <- plotly::renderPlotly({
    plot_trends()
  })
  
  output$table_trendy_names <- DT::renderDT({
    babynames %>% 
      filter(name == input$name)
  })
}

shinyApp(ui = ui, server = server)

Redigera och kör kod