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

Lên khung (Wireframing)

Hãy quay lại ví dụ trước về dashboard cho kết quả phân tích một giải đấu bóng đá. Ở các bài tập trước, bạn đã thiết lập phần header và sidebar.

Cụ thể, một nút trong sidebar được định nghĩa bằng menuItem() và nằm trong sidebarMenu(). Bạn có thể nhận thấy các nút này hiện chưa làm gì cả. Bây giờ, bạn sẽ liên kết các nút trong sidebar tới những trang khác trong phần body của UI. Đây vẫn là một phần của quy trình lên khung (wireframing), nơi bạn còn đang quyết định vị trí của từng đối tượng. Mỗi trang trong body được định nghĩa bằng tabItem() và phải nằm trong tabItems.

Các gói shinyshinydashboard đã được nạp sẵn cho bạn. Ngoài ra, phần header của dashboard đã được lưu vào header.

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

Xây dựng Dashboard với shinydashboard

Xem khóa học

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.

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Analysis results for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
               messageItem("Colleage", "Hello world!")),
  dropdownMenu(type = "notifications",
               notificationItem("Have you rested today?"),
               taskItem("Dashboard completion", value = 20)))

sidebar <- dashboardSidebar(
  sidebarMenu(
    width = 400,
    id = "pages",
    menuItem("Match details", tabName = "matches", icon = icon("futbol"),
             badgeLabel = "New content!", badgeColor = "green"),
    menuItem("Overall results", tabName = "overall", 
             menuSubItem("Charts", tabName = "charts"),
             menuSubItem("Data table", tabName = "datatable", icon=icon("file-excel"))),
    menuItem("A slider",  sliderInput("slider", "Number of goals", min=0, max=10, value = 2))
  )
)

body <- dashboardBody(
  # Link "matches" to an empty page in the body
  ___(
    ___(___, "Match information goes here")
  )
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
Chỉnh sửa và Chạy Mã