เริ่มต้นใช้งานเริ่มต้นใช้งานได้ฟรี

การวางโครงร่าง (Wireframing)

มาดูตัวอย่างเดิมของ dashboard สำหรับแสดงผลการวิเคราะห์การแข่งขันฟุตบอลกันอีกครั้ง ในแบบฝึกหัดก่อนหน้า ได้ตั้งค่า header และ sidebar เรียบร้อยแล้ว

โดยเฉพาะอย่างยิ่ง ปุ่มใน sidebar กำหนดด้วย menuItem() และอยู่ภายใน sidebarMenu() คุณอาจสังเกตว่าปุ่มเหล่านี้ยังไม่ทำงานในขณะนี้ ต่อไปจะเชื่อมโยงปุ่มใน sidebar เหล่านี้เข้ากับหน้าต่างๆ ในส่วน body ของ UI ซึ่งยังเป็นส่วนหนึ่งของกระบวนการวางโครงร่าง (wireframing) ที่กำลังตัดสินใจว่าจะวางแต่ละออบเจกต์ไว้ที่ใด แต่ละหน้าใน body กำหนดด้วย tabItem() และต้องอยู่ภายใน tabItems

แพ็กเกจ shiny และ shinydashboard ถูกโหลดให้แล้ว และ dashboard header ถูกเก็บไว้ในตัวแปร header เรียบร้อยแล้ว

แบบฝึกหัดนี้เป็นส่วนหนึ่งของหลักสูตร

การสร้างแดชบอร์ดด้วย shinydashboard

ดูคอร์ส

แบบฝึกหัดเชิงโต้ตอบแบบลงมือทำ

ลองทำแบบฝึกหัดนี้โดยเติมโค้ดตัวอย่างนี้ให้สมบูรณ์

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)
แก้ไขและรันโค้ด