Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >基于shinydashboard搭建你的仪表板(四)

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

作者头像
1480
发布于 2019-05-30 10:29:38
发布于 2019-05-30 10:29:38
1.2K00
代码可运行
举报
文章被收录于专栏:数据分析1480数据分析1480
运行总次数:0
代码可运行

布局

主体的布局使用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
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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
代码运行次数:0
运行
AI代码解释
复制
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 删除。

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

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
基于shinydashboard搭建你的仪表板(三)
前面已经介绍了shinydashboard框架的标题栏和侧边栏的输入项部分,这节介绍一下侧边栏的菜单项(menu items),侧边栏的菜单项主要用于切换不同的主体界面,点击不同的菜单项,主体呈现出不同的界面内容。
1480
2019/05/24
1.5K0
基于shinydashboard搭建你的仪表板(二)
前面简单介绍了shinydashboard的标题栏,会发现标题栏是个鸡肋,只要掌握如何设置title即可。这一节简单介绍一下侧边栏。侧边栏(siderbar)主要起到导航作用,可以简单理解为输入栏,不同的输入栏(输入),主体(body)就呈现出不同内容(输出)。
1480
2019/05/22
3K0
基于shinydashboard搭建你的仪表板(五)
承接系列四,这一节介绍一下主体中的4种box函数。顾名思义,box函数是在主体中创建一些对象框,而对象框内可以包含任何内容。
1480
2019/06/03
2.5K0
shiny入门学习路径
视频演示:http://mpvideo.qpic.cn/0bc37aadyaaanqaakvelqjrvb6gdht4aapaa.f10002.mp4? 1. 什么是Shiny? Shiny 是一个为
拴小林
2023/03/06
1.8K0
shiny入门学习路径
创建自己的第一个shiny项目
https://yanshenli.shinyapps.io/shinydemo/
拴小林
2022/03/14
1.1K0
创建自己的第一个shiny项目
bs4Dash | Shiny 仪表盘框架
bs4Dash 是一款基于 AdminLTE3 的 Bootstrap 4 Shiny 仪表盘模板框架,这个前端界面简洁清爽,用起来也和 Shinydashboard 非常类似,也易于学习使用。
生信菜鸟团
2020/11/11
3.2K0
bs4Dash | Shiny 仪表盘框架
我的 Shiny 练习 | 堆积柱状图
我最近在分析胆汁酸的数据,所以想画个堆积柱状图,看看组间情况,大概的设想就是这样:
生信菜鸟团
2021/02/03
2.7K0
我的 Shiny 练习 | 堆积柱状图
「R」Shiny:响应式编程(三)响应表达式
前面我们已经快速接触了几次响应表达式,相信读者大致了解它是做什么的。本文将进一步深入学习这个知识点,展示为什么它对于构建网页应用很重要。
王诗翔呀
2020/07/03
1.7K0
Shiny 基础
作为一个实例展示, Shiny 中内置了一些例子,我们可以通过运行 runExample() 来探索Shiny APP的结构:
王诗翔呀
2020/11/13
2.7K0
Shiny 基础
shiny入门课【3.布局指引】
概览 shiny提供了几种基本的布局: 最简单的布局是左侧边栏右主页的布局。 使用栅栏自定义布局 使用 tabsetPanel()和navlistPanel()函数实现分段布局。 使用 navbarPage()函数实现头部导航布局。 侧边栏布局 示例如下: ui <- fluidPage( titlePanel("Hello Shiny!"), sidebarLayout( sidebarPanel( sliderInput("obs", "Number of observ
用户2936342
2019/06/18
1.4K0
R : Shiny|搭建单细胞数据分析云平台
在R for data science这本书中,作者提出数据分析的一个流程,在数据转换、可视化以及建模之后,来到数据分析的新阶段:与别人分享我们的数据。之前我们分享了许多单细胞数据分析的教程cellranger拆库定量、seurat质控分析,monocle轨迹推断,R语言给单细胞数据分析带来更多可能。那么,在数据分析进入下游之后,如何给自己的研究增加更多可交付的内容呢?Shiny会是一个不错的选择。
生信技能树jimmy
2020/03/27
4K0
shiny学习-2
使用这些控件需要两个参数,一个参数用来命名,一个参数是label,前一个被用来在程序内传递参数,后一个参数用来显示在用户界面 例子
火星娃统计
2020/09/15
2.2K0
shiny学习-2
shiny动态仪表盘应用——中国世界自然文化遗产可视化案例
这一篇很早就想写了,一直拖到现在都没写完。 虽然最近的社交网络上娱乐新闻热点特别多,想用来做可视化分析的素材简直多到不可想象,但是我个人一向不追星,对明星热文和娱乐类的新闻兴趣不是很大。还是更愿意把自
数据小磨坊
2018/04/11
1.4K0
shiny动态仪表盘应用——中国世界自然文化遗产可视化案例
Shiny学习(三)||添加控件
继续学习如何将控件添加到Shiny应用程序中。控件是用户可以与之交互的Web元素。控件为用户提供了一种将消息发送到Shiny应用程序的方法。
生信编程日常
2020/05/18
1.4K0
Shiny学习(三)||添加控件
shiny随手日记1
该函数在默认不输入的情况下,会生成null,而导致后续的ggplot2不会生成空白图片,解决了我们的问题。
用户1359560
2020/12/22
3220
shiny随手日记1
R语言图形交互基础二(页面布局)
前面我们介绍了shiny这个包的基础用法,今天我们给大家介绍下如何设定各个元素的布局。其中用到了很多函数我们在此进行一一的描述,真正让大家体验下R语言中的网页前端。首先我们看下页面的类型:
一粒沙
2019/07/31
1.9K0
「Shiny」应用程序布局指南
Shiny 包含了许多用于布局应用程序组件的工具。本指南描述了以下应用程序布局功能特性:
王诗翔呀
2021/04/07
8K0
「Shiny」应用程序布局指南
「R」Shiny:案例研究:急诊室受伤情况分析
在之前的推文中我们学习了一堆的知识与概念,为了帮助大家吸收,接下来我们将一起通过创建一个探究有趣数据集的 Shiny 应用来整合当前所学的所有思想。
王诗翔呀
2020/07/03
4.4K0
「R」Shiny:案例研究:急诊室受伤情况分析
让ChatGPT编写交互式网页应用的临床预测模型
R Shiny是一种基于Web的交互式数据可视化工具,能够帮助研究人员和临床医生快速构建交互式应用程序,从而进行数据分析和可视化。
Jamesjin63
2023/03/08
1.9K0
让ChatGPT编写交互式网页应用的临床预测模型
「R」Rmarkdown与Shiny
Rmarkdown扩展了markdown的语法,所以markdown能写的,Rmarkdown能写,后者还提供了一些新的特性,特别是图表,很nice。
王诗翔呀
2020/07/02
3.8K0
相关推荐
基于shinydashboard搭建你的仪表板(三)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档