Bắt đầu ngayBắt đầu miễn phí

Ngắm UFO: bố cục theo thẻ (tab)

Hiện tại, ứng dụng khá rối vì biểu đồ nằm phía trên bảng. Vì đây là một dashboard, sẽ hay hơn nếu tách riêng hai phần đầu ra.

Bước cuối cùng để hoàn thiện dashboard là lấy plotOutput()tableOutput() bạn đã tạo và thêm bố cục theo thẻ (tab).

Bài tập này là một phần của khóa học

Xây dựng ứng dụng web với Shiny trong R

Xem khóa học

Hướng dẫn bài tập

  • Thêm bố cục tab panel và hai thẻ (tab). Thẻ đầu tiên chứa biểu đồ, thẻ thứ hai chứa bảng. Bạn có thể đặt tên các thẻ theo cách bạn thấy hợp lý!

Bài tập tương tác thực hành trực tiếp

Hãy thử làm bài tập này bằng cách hoàn thành đoạn mã mẫu này.

ui <- fluidPage(
  titlePanel("UFO Sightings"),
  sidebarPanel(
    selectInput("state", "Choose a U.S. state:", choices = unique(usa_ufo_sightings$state)),
    dateRangeInput("dates", "Choose a date range:",
      start = "1920-01-01",
      end = "1950-01-01"
    )
  ),
  # MODIFY CODE BELOW: Create a tab layout for the dashboard
  mainPanel(
    plotOutput("shapes"),
    tableOutput("duration_table")
  )
)

server <- function(input, output) {
  output$shapes <- renderPlot({
    usa_ufo_sightings %>%
      filter(
        state == input$state,
        date_sighted >= input$dates[1],
        date_sighted <= input$dates[2]
      ) %>%
      ggplot(aes(shape)) +
      geom_bar() +
      labs(
        x = "Shape",
        y = "# Sighted"
      )
  })

  output$duration_table <- renderTable({
    usa_ufo_sightings %>%
      filter(
        state == input$state,
        date_sighted >= input$dates[1],
        date_sighted <= input$dates[2]
      ) %>%
      group_by(shape) %>%
      summarize(
        nb_sighted = n(),
        avg_duration_min = mean(duration_sec) / 60,
        median_duration_min = median(duration_sec) / 60,
        min_duration_min = min(duration_sec) / 60,
        max_duration_min = max(duration_sec) / 60
      )
  })
}

shinyApp(ui, server)
Chỉnh sửa và Chạy Mã