shinydashboard 中的交互元素

使用 shinydashboard 构建仪表板

Png Kee Seng

Researcher

情景

我们在伦敦的一家旅行社工作。
游客需要住宿。
我们能如何帮助他们？

伦敦的图示

指定价格范围内的房源数量
私人房间占比
平均价格
若干图表
数据表
伦敦地图

¹ 图片来源 Freepik

仪表板草图

仪表板的草图。

构建仪表板：搭建框架

通过搭建空的 shinydashboard（含标题与侧边栏按钮）进行线框设计。

header <- dashboardHeader(
  title = "Home rental listings")
sidebar <- dashboardSidebar()
body <- dashboardBody()
ui <- dashboardPage(header, 
                    sidebar, 
                    body)

server <- function(input, output) {}

shinyApp(ui, server)

构建仪表板：添加 ValueBox

在线框图中添加 valueBox。

在 body 中：

fluidRow(
    valueBoxOutput(outputId = "count"),
    valueBoxOutput(outputId = "prop"),
    valueBoxOutput(outputId = "avg"))

在 server 中：

output$count <- renderValueBox({
    valueBox(..., icon = ...)})
output$prop <- renderValueBox(...)
...

构建仪表板：添加控件

添加输入——为用户提供控件。

在 body 中：

box(
    side = "right", ...,
    sliderInput(inputId = "range",
        label = "选择价格范围：",
        min = 0,
        max = 25000,
        value = c(0,25000))
        ))

在 server 中更新，使用 input$range[1] 和 input$range[2]

构建仪表板：添加交互式图表

使用 plotly 添加交互式图表。

在 body 中：

plotlyOutput("plots", 
    height = 500, 
    width = 600)

在 server 中：

output$plots <- renderPlotly({
      ...
  })

构建仪表板：再添一个图表

通过下拉菜单在同一页面添加第二个图表。

在 body 中：

selectInput(inputId = "select", 
    label = "选择分组：", 
    choices = c("Neighbourhood", 
            "Room Type"))

在 server 中：

output$plots <- renderPlotly({
    if (input$select == ...){plot1}
    else if(input$select == ...){plot2}
  })

构建仪表板：添加说明与选项卡

添加文字说明以解释该仪表板。

在 body 中：

box(side = "right", ...,
    title = "欢迎来到伦敦！", 
    "...")

在 body 中更新：

tabBox(id = "tabset", ...,
    tabPanel("Charts", ...),
    tabPanel("Data table", ...)

构建仪表板：添加交互式表格

使用 dataTable 函数添加交互式表格。

可使用 shiny 函数。

在 body 中：

dataTableOutput("table")

在 server 中：

output$table <- 
    renderDataTable(listings)

构建仪表板：添加交互式地图

在仪表板中添加 leaflet 地图。

在 sidebar 中：

sidebarMenu(
    menuItem("Charts", ...),
    menuItem("Map", ...))

在 body 中：

leafletOutput("map",...)

在 server 中：

output$map <- renderLeaflet(map)

Passons à la pratique !

使用 shinydashboard 构建仪表板