前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于shinydashboard搭建你的仪表板(四)

基于shinydashboard搭建你的仪表板(四)

作者头像
1480
发布2019-05-30 18:29:38
1K0
发布2019-05-30 18:29:38
举报
文章被收录于专栏:数据分析1480

布局

主体的布局使用Bootstrapgrid layout system(Bootstrap网格系统),可以将主体划分为12个列宽相等的区域以及任意可变高度的行。主体布局有3种布局:基于行的布局(Row_based Layout)、基于列的布局(column_based Layout)以及混合布局(Mixed row and column layout),使用fluidRow()函数和column()函数创建3种类型的布局。

之前介绍过,输入项函数通过改变输入参数改变界面所呈现的内容,菜单项函数放在侧边栏,一般情况下输入项函数可以放在侧边栏(前面部分介绍的),也可以将输入项函数部署在主体中。简单解释一下3种布局(非官方,个人认为的):

基于行的布局:代码中多个fluidRow()函数,每一个fluidRow()构成一行,即为一个整体,每行整体中元素列宽之和为12。

基于列的布局:代码中有一个fluidRow()函数和若干个column()构成。狭义地,只有一个整体,fluidRow()构成的行整体,行整体下多个column构成的列整体;广义地,多个列整体,由每一个column()函数构成的列整体,列整体内元素的高度会随着呈现的内容的变化发生相应的变化。

混合布局:基于行的布局和基于列的布局的混搭。

基于行的布局

代码语言:javascript
复制
library(shiny)library(shinydashboard)library(ggplot2)body <- dashboardBody(            fluidRow(              box(selectInput("Position", "The Type of Plot:",                      c("fill" = "fill","dodge" = "dodge","stack" = "stack")),width = 2),              box(radioButtons("Title","The Title:",choices = c("ggplot","GGPLOT")),width = 2),              box(plotOutput("Plot"), width = 8)),            fluidRow(              box(sliderInput("obs", "Number of Data:", min = 0, max = 100, value = 2, animate = TRUE),width = 4),                  box(dataTableOutput("Data"), width = 8))            )
ui <- dashboardPage(  dashboardHeader(title = "Flash WorkingNotes"),  dashboardSidebar(),  body)
server <- function(input, output) {  set.seed(123)  data = diamonds[sample(1:nrow(diamonds), 10000, replace = F), ]  output$Plot <- renderPlot({    ggplot(data, aes(x = price, fill = cut)) +       geom_histogram(position = input$Position, bins = 30) +      ggtitle(input$Title) +      theme(plot.title = element_text(hjust = 0.5)) + xlab("")  })  output$Data <- renderDataTable({    head(data, input$obs)  })}shinyApp(ui, server)

上述动态图为基于行的布局,有两个fluidRow()函数,所以布局中创建了两个行整体:一个行整体是绘制不同类型的直方图,包含直方图类型参数输入项、直方图标题输入项以及直方图输出项3个元素。另一个行整体是源数据,包含滑动条输入项、数据输出项。在box()函数中可以使用width = n设置整体中元素的列宽,可以使用height = n,将每个整体内的元素的高度设为相同。

基于列的布局

代码语言:javascript
复制
library(shiny)library(shinydashboard)library(ggplot2)library(DT)
body <- dashboardBody(  fluidRow(    column(width = 5,      box(selectInput("Position", "The Type of Plot:",                      c("fill" = "fill","dodge" = "dodge","stack" = "stack")),width = NULL),      box(radioButtons("Title","The Title:",choices = c("ggplot","GGPLOT")),width = NULL),      box(plotOutput("Plot"), width = NULL)),    column(width = 7,      box(sliderInput("obs", "Number of Data:", min = 0, max = 100, value = 2, animate = TRUE),width = NULL),      box(dataTableOutput("Data"), width = NULL)),      box(verbatimTextOutput("Summary"), width = 7)))ui <- dashboardPage(  dashboardHeader(title = "Flash WorkingNotes"),  dashboardSidebar(),  body)
server <- function(input, output) {  set.seed(123)  data = diamonds[sample(1:nrow(diamonds), 10000, replace = F), ]  output$Plot <- renderPlot({    ggplot(data, aes(x = price, fill = cut)) +       geom_histogram(position = input$Position, bins = 30) +      ggtitle(input$Title) +      theme(plot.title = element_text(hjust = 0.5)) + xlab("")  })  output$Data <- renderDataTable({    head(data, input$obs)  })  output$Summary <- renderPrint({    str(data)  })}shinyApp(ui, server)

上面动态图为基于列的布局,有一个fluidRow函数和两个column函数构成。从广义上来说,有两个列整体,第一个列整体为绘制不同类型的直方图:包含直方图类型参数输入项、直方图标题输入项以及直方图输出项;另一个列整体包含滑动条输入项、源数据和数据类型。留意滑动条的变动,数据源的高度发生着相应的变化。一般情况下,column内的每一个box()的width = NULL。

混合布局

混合布局是最常用的,由基于行的布局和基于列的布局的混搭而成。

代码语言:javascript
复制
library(shiny)library(shinydashboard)library(ggplot2)body <- dashboardBody(  fluidRow(    box(selectInput("Position", "The Type of Plot:",                    c("fill" = "fill","dodge" = "dodge","stack" = "stack")),width = 4),    box(radioButtons("Title","The Title:",choices = c("ggplot","GGPLOT")),width = 4),    box(sliderInput("obs", "Number of Data:", min = 0, max = 100, value = 2, animate = TRUE),width = 4)    ),  fluidRow(    column(width = 12,box(plotOutput("Plot"), width = NULL)),    column(width = 12,box(dataTableOutput("Data"), width = NULL))))
ui <- dashboardPage(  dashboardHeader(title = "Flash WorkingNotes"),  dashboardSidebar(),  body)server <- function(input, output) {  set.seed(123)  data = diamonds[sample(1:nrow(diamonds), 10000, replace = F), ]  output$Plot <- renderPlot({    ggplot(data, aes(x = price, fill = cut)) +       geom_histogram(position = input$Position, bins = 30) +      ggtitle(input$Title) +      theme(plot.title = element_text(hjust = 0.5)) + xlab("")  })  output$Data <- renderDataTable({    head(data, input$obs)  })}shinyApp(ui, server)

上述动态图中有两个fluidRow()函数和两个column()函数,第一个行整体由三个输入项函数构成,第二个行整体由图形列整体和数据源列整体组成。

总结

主体布局有基于行的布局、基于列的布局以及混合布局3种,其中混合布局是最常用到的,3种布局由fluidRow()函数和column()函数搭建。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 数据分析1480 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档