Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >R markdown - flexdashboard -网格布局、滚动和选项卡集

R markdown - flexdashboard -网格布局、滚动和选项卡集
EN

Stack Overflow用户
提问于 2018-02-09 09:14:24
回答 1查看 3.7K关注 0票数 5

我正在尝试弄清楚如何将网格布局、行式标签集和在markdown / flexdashboard中滚动的功能结合起来。

我想要实现的是,标签3应该在右边的标签1和2与向下滚动到标签4-6的能力(其中标签6应该在4/5的右边)。如下所示:

这个是可能的吗?

代码语言:javascript
运行
AI代码解释
复制
---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: row
    vertical_layout: scroll

---

```{r setup, include=FALSE}

库(Flexdashboard)

代码语言:javascript
运行
AI代码解释
复制
A {data-orientation=rows}
===================================================

Row {data-width=500 data-height=400 .tabset}
-----------------------------------------------------------------------

### Tab 1 {data-height=400 data-width=500}

```{r}

绘图(rnorm(10))

代码语言:javascript
运行
AI代码解释
复制
### Tab 2 {data-height=400 data-width=500}

```{r}

绘图(rnorm(10))

代码语言:javascript
运行
AI代码解释
复制
Column 
-----------------------------------------------------------------------

### Tab 3 {data-height=400 data-width=300}
Some text


Row {data-width=500 data-height=400 .tabset}
-----------------------------------------------------------------------

### Tab 4 {data-height=400 data-width=500}

```{r}

绘图(rnorm(10))

代码语言:javascript
运行
AI代码解释
复制
### Tab 5 {data-height=400 data-width=500}

```{r}

绘图(rnorm(10))

代码语言:javascript
运行
AI代码解释
复制
Column 
-----------------------------------------------------------------------

### Tab 6 {data-height=400 data-width=300}

Some text
EN

回答 1

Stack Overflow用户

发布于 2020-04-26 05:52:22

以下是您的问题的可能解决方案

这是代码

代码语言:javascript
运行
AI代码解释
复制
---
title: "Test"
output: flexdashboard::flex_dashboard
---

```{r setup, include=FALSE}

库(Flexdashboard)

需要(Shinydashboard)

需要(闪亮)

需要(情节)

代码语言:javascript
运行
AI代码解释
复制
A {data-orientation=rows}
===================================================

Row
-----------------------------------------------------------------------

```{r}

p1 <- plot_ly(x = 1:10,y= rnorm(10))

tabBox(width=5,tabPanel("Tab1",p1),tabPanel("Tab2"),height = "450px")

代码语言:javascript
运行
AI代码解释
复制
```{r}

tabBox(width=7,tabPanel("Tab3",“一些文本”),height = "450px")

代码语言:javascript
运行
AI代码解释
复制
Row
-----------------------------------------------------------------------

```{r}

p2 <- plot_ly(x = 1:10,y= rnorm(10))

tabBox(width=5,tabPanel("Tab4",p2),tabPanel("Tab5"),height = "450px")

代码语言:javascript
运行
AI代码解释
复制
```{r}

tabBox(width=7,id = "tabset4",tabPanel("Tab6",“一些文本”),height = "450px")

代码语言:javascript
运行
复制
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48702343

复制
相关文章
R文档沟通|Dashboards入门(1)
仪表盘在业务风格的报告中特别常见。它们可以用来突出报告的概要和关键内容。仪表盘的布局通常是基于网格搭建的,各个组件排列在各种大小的“盒子”中。
庄闪闪
2021/04/26
1.5K0
R文档沟通|Dashboards入门(1)
rmarkdown+flexdashboard制作dashboard原型
R语言作为一门统计计算和数据可视化为核心特色的工具性语言,其在可视化领域或者说数据呈现方面有着非常成熟和系统的解决方案。
数据小磨坊
2018/08/16
4.5K0
rmarkdown+flexdashboard制作dashboard原型
创建水平滚动的正确方式【CSS 网格布局】
自从奈飞 Netflix 成为了家喻户晓的名字以来,在移动端中我们一直使用横向布局。水平滚动容器(列表)已经成为了一种常见的布局做法,而不是将东西都堆叠在页面上,这将减少占用小屏幕设备垂直的空间。
Jimmy_is_jimmy
2022/11/22
2.8K0
创建水平滚动的正确方式【CSS 网格布局】
flexdashboard包:用于R的简单交互式仪表盘
去年师兄用这个包做了一个不错的应用(企业可靠性统计方向的项目)。今天正好需要学习下数据可视化仪表盘的制作。尝试了下,还不错,比Tableau还要优秀。最近出一期入门,有机会可以把自己的例子介绍一下。
庄闪闪
2021/04/09
1K0
CSS 浮动布局和网格系统
浮动能将一个元素(通常是一张图片)拉到其容器的一侧,这样文档流就能够包围它。这种布局在报纸和杂志中很常见,因此 CSS 增加了浮动来实现这种效果。(CSS 是一种排版约定)
Cellinlab
2023/05/17
9560
CSS 浮动布局和网格系统
R文档沟通|Dashboards入门(2)
请注意,第一行文本(Coluumn 1)下的一系列破折号是第二级标题的另一种 Markdown 语法形式,即
庄闪闪
2021/05/17
1K0
R文档沟通|Dashboards入门(2)
grid网格布局
​ 距今来看已经十多年了,确确实实占据了前端布局中很大的地位,相比大家对flex都很熟悉,所以今天我们的主角就是-------> Grid
Snine
2022/02/11
2K0
grid网格布局
R markdown
找到一个project——file——new file——R markdown——新建二级标题##修改名称——>引用哪里——可以添加代码 message=F,waring=F,1前面的·,反引号,markdown直接写,用···,插入代码块,使用ctr+alt+i,插入代码,按回车,添加后后点毛球渲染,命名。如果想改成md格式,运行代码knitr::knit("noteabc.Rmd"),即可改成md格式。看md格式的编辑器是VScode
用户10020512
2023/02/01
3860
R Markdown
Note that the echo = FALSE parameter was added to the code chunk to prevent printing of the R code that generated the plot.
xiaoxiang学生信
2023/02/26
3690
bootstrap 网格布局
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
用户5760343
2022/01/10
8650
bootstrap 网格布局
BootStrap网格布局
  如何使用BootStrap样式   BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了。 <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">   在代码中,直接使用class就可以使用其定义的样式,例如使用它button样式,就可以按照下面的方式: <button class="btn btn-primary" type="butt
用户1154259
2018/01/17
1.8K0
BootStrap网格布局
grid布局方式_grid网格布局
由GridBagConstraints类实现的布局管理器称为网格组布局管理器,它实现了一个动态的矩形网格,这个矩形风格由无数个矩形单元格组成,每个组件可以占用一个或多个这样的单元格。
全栈程序员站长
2022/10/04
1.2K0
grid布局方式_grid网格布局
十个超级好用的R语言编程技巧,一般人绝不知道!
由于R语言生态系统内容繁复并在不断发展,人们往往容易忽视一些切实有用的知识。这些技巧往往非常简单,但对于完成工作有很大的帮助。
CDA数据分析师
2019/08/01
2.4K0
十个超级好用的R语言编程技巧,一般人绝不知道!
浅议内滚动布局
一、什么是内滚动布局? 所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的<html>滚动而言的,例如,下图所示滚动条,是从头部下方开始: 传统的页面滚动,基本上是相对于整个浏览器窗体,例如,QQ视频首页: 二、为什么会有内滚动布局? 随着显示器设备越大越宽越密,以及现代web技术的发展。web站点已经开始有了从传统的瀑布式网页向类桌面软件风格站点转变的趋势。比方说,QQ音乐的首页目前是这样子的: 以后可能就会变成这样子: “纳尼,这不就是现在的QQ音乐软件界面截图?”
腾讯大讲堂
2018/02/12
2.6K0
浅议内滚动布局
浅议内滚动布局
所谓“内滚动布局”,顾名思义就是主滚动条在页面内部的布局,是相对于传统的<html>滚动而言的,例如,下图所示滚动条,是从头部下方开始:
疯狂的技术宅
2019/03/27
1.2K0
浅议内滚动布局
css - Grid网格布局
.wrapper{ display: grid; grid-template-columns: 100px 100px 100px; grid-template-r
xing.org1^
2018/12/17
1.2K0
css - Grid网格布局
浅谈GridLayout(网格布局)
Android 4.0 布局-->GridLayout 网格布局 以行列单元格的形式展示内部控件排列,可以实现类似计算机键盘效果 ,也可以实现可自动变行的标签群效果 使用GridLayout ,有效减少了布局的深度,渲染速度也是很快的 类似于LinearLayout 的使用,额外添加了一些特有的属性 先来看下GridLayout的一些属性介绍 1、 android:orientation="horizontal|vertical" 内部控件是水平排列的还是竖直排列的    与LinearLayout使用方法
听着music睡
2018/05/18
1.5K0
bootstrap 网格布局 2
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 中型和大型设备</title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
用户5760343
2022/01/10
7270
bootstrap 网格布局 2
Grid网格布局入门
它将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局。以前,只能通过复杂的 CSS 框架达到的效果,现在浏览器内置了。
javascript.shop
2019/09/04
2.2K1
Grid网格布局入门
bootstrap 网格布局 偏移
offset值从1到11 div:container,row,col-md-6 col-md-offset-3
用户5760343
2022/01/10
9300
bootstrap 网格布局 偏移

相似问题

Flexdashboard/R Markdown中的布局

12

R Markdown/Flexdashboard

117

R flexdashboard选项卡集样式

114

带有选项卡集的flexdashboard布局

11

如何在此flexdashboard布局中创建选项卡集

40
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档