主体

使用 shinydashboard 构建仪表板

Png Kee Seng

Researcher

概览

  • shinydashboard UI 的主体部分
  • 通常在此放置输入与输出
    • 类似餐厅的点单与出菜
    • 由服务器负责通信
  • 主体由 dashboardBody() 定义，惯例存为 body
body <- dashboardBody(...)
使用 shinydashboard 构建仪表板

线框图

  • 先做线框设计
    • 在填充内容前搭好结构
  • 在 shinydashboard 中，先确定对象位置

齐柏林飞艇的线框图。

1 Brett Jordan，Flickr
使用 shinydashboard 构建仪表板

添加行与方框：空方框

  • 用 fluidRow() 添加行
  • 用 box() 添加方框

仪表板包含两行，每行两个空方框。

body <- dashboardBody(

  fluidRow(

           box("第1行，第1框"), 
           box("第1行，第2框")

           ),
  fluidRow(

           box("第2行，第1框"), 
           box("第2行，第2框")

           )

)
使用 shinydashboard 构建仪表板

添加行与方框：框内内容

带有四个方框且部分有内容的主体。

body <- dashboardBody(
  fluidRow(box("第1行，第1框", 

               plotOutput('plot')),

           box("第1行，第2框")),
  fluidRow(box("第2行，第1框"), 
           box("第2行，第2框", 

               selectInput("select", 
                           "选择队伍编号：", 
                           choices = c(1,2))))

)
使用 shinydashboard 构建仪表板

防止方框溢出

  • 默认每个方框占总水平空间的12格中的6格
  • 为防止溢出，设置 width
    • 本例设为 3、5、4
  • 强烈建议添加 box()

主体中更多方框

body <- dashboardBody(
  fluidRow(box("第1行，第1框"), 
           box("第1行，第2框"),
           box("第1行，第3框")),
  fluidRow(box("第2行，第1框"), 
           box("第2行，第2框"))
)

body <- dashboardBody(
  fluidRow(box("第1行，第1框", width = 3), 
           box("第1行，第2框", width = 5),
           box("第1行，第3框", width = 4)),
  fluidRow(box("第2行，第1框"), 
           box("第2行，第2框"))
)
使用 shinydashboard 构建仪表板

valueBox 与 infoBox

  • 还有用于少量信息的方框
    • valueBox()
    • infoBox()

主体中的 valueBox 和 infoBox。

body <- dashboardBody(
  fluidRow(valueBox(value = 3, 
                    subtitle = "红牌总数", 
                    icon = icon("user"),
                    color = "red"),

           infoBox(value = 158, 
                   title = "进球总数", 
                   icon = icon("futbol"))
           ))
使用 shinydashboard 构建仪表板

valueBoxOutput 与 infoBoxOutput

  • valueBox() 和 infoBox() 的变体： valueBoxOutput() 与 infoBoxOutput()
  • 它们是输出函数
  • 还存在 renderValueBox() 与 renderInfoBox()
  • 仍需使用 valueBox() 与 infoBox()

主体中的 valueBoxOutput 和 infoBoxOutput。渲染后与前一页相同。

body <- dashboardBody(
  fluidRow(valueBoxOutput(outputId = "valuebox1"),
           infoBoxOutput(outputId = "infobox1")
           ))

server <- function(input, output){
  output$valuebox1 <- renderValueBox(
    valueBox(3, "红牌总数",
                icon = icon("user"), color = "red"))
  output$infobox1 <- renderInfoBox(
    infoBox(158, 
                   title = "进球总数", 
                   icon = icon("futbol")))
}
使用 shinydashboard 构建仪表板

valueBoxOutput 与 plotOutput 的类比

  • plotOutput()：
    • 放在 UI 中
    • 决定其在 shinydashboard 中的位置
  • renderPlot()：
    • 放在 server() 中
    • 包含一个 ggplot() 对象
  • valueBoxOutput()：
    • 放在 UI 中
    • 决定其在 shinydashboard 中的位置
  • renderValueBox()：
    • 放在 server() 中
    • 包含一个 valueBox() 对象
使用 shinydashboard 构建仪表板

链接侧边栏与主体

  • 回忆之前侧边栏有"charts"和"statistics"两个按钮
  • 要将其链接到主体，需要添加 tabItems()
    • 每个页面由一个 tabItem() 定义
    • 每对 menuItem()-tabItem() 的标签必须匹配

主体与侧边栏已链接

sidebar <- dashboardSidebar(
  sidebarMenu(
    id = "pages",

    menuItem("Many charts", tabName = "charts", 
             icon = icon("chart-line"),
             badgeLabel = "New content!", badgeColor = "green"),

    menuItem("Statistics", icon = icon("file-excel"), 
             tabName = "statistics", 
             badgeLabel = "urgent", badgeColor = "red")
 ))

body <- dashboardBody(
  tabItems(

    tabItem("charts",
      "此处显示图表。"
    ),
    tabItem("statistics",
      "此处显示统计。"
)))
使用 shinydashboard 构建仪表板

主体内的选项卡

  • 在 shinyApp 中，也可用 tabsetPanel() 定义一组选项卡
    • 每个选项卡由 tabPanel() 定义
  • 不要与 tabItems()/tabItem() 混淆

在主体内添加选项卡集

body <- dashboardBody(tabsetPanel(

    tabPanel("Distributions", 
             box(plotOutput("dist"))),
    tabPanel("Statistics", 
             dateInput("matchdate", 
                       "输入比赛日期：", 
                       value = "2022-11-20"),
             valueBoxOutput("red"), 
             valueBoxOutput("yellow")),
    tabPanel("Data", "此处显示数据。", 
             tableOutput("data"))

))

server <- function(input, output){
  output$red <- renderValueBox(valueBox(0, "红牌"))
  output$yellow <- renderValueBox(valueBox(6, "黄牌"))
}
使用 shinydashboard 构建仪表板

让我们来练习！

使用 shinydashboard 构建仪表板

Preparing Video For Download...