R flexdashboard 删除标题栏

Posted 2023-03-22

【中文标题】R flexdashboard 删除标题栏

【英文标题】：R flexdashboard remove title bar

【发布时间】：2017-09-24 01:36:03

【问题描述】：

我正在使用rMarkdown 和来自rStudio 的flexdashboard 包开展一个项目。一切都很好地融合在一起。但我想删除您在此处图片顶部看到的蓝色标题栏。

我们将这个 html 页面放到一个窗口中，这样它就变成了第二个标题栏，这看起来很糟糕。 flexdashboard 中是否有移除整个设备的功能？

这是 YAML 和您在照片中蓝色条下方看到的第一个块。任何建议将不胜感激。

---
title: New Hampshire Statewide Age Adjusted Incedence Rates of Lyme
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
---

```r setup, include=FALSE, message=FALSE, warning=FALSE, echo=TRUE

```

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

### 
```r, aarState, message=FALSE, warning=FALSE

library(flexdashboard)
library(rbokeh)
#load state-wide age adjusted rates

aar<-read.csv("stateAAR.csv")
figure(title=" Age Adjusted Rates by Year",width= 1500, height =600) %>%
  ly_segments(year, lci*100000, year, uci*100000, data=aar, color = "#b37700", width = 1) %>%
  ly_points(year, adj.rate*100000, glyph = 21, size=6, data = aar, hover= "<strong>Rate per 100,000:</strong> @rateHundThou </br> <strong>Upper Confidence:</strong> @uciHT </br><strong> Lower Confidence:</strong> @lciHT " , color="#666622" )%>%

  x_axis(label ='Year')%>%
  y_axis(label ='Age Adjusted Rate')


```  

Row

【参考方案1】：

您可以直接将 CSS 样式添加到您的降价文档（不需要 JQuery）：

---
title: "Untitled"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
---
<style>

body 
  padding-top:0px


.navbar
  visibility: hidden


</style>


```r setup, include=FALSE
library(flexdashboard)
```

Column data-width=650
-----------------------------------------------------------------------

### Chart A

```r
hist(iris$Sepal.Length)

```

Column data-width=350
-----------------------------------------------------------------------

### Chart B

```r
hist(iris$Sepal.Width)
```

### Chart C

```r
hist(iris$Petal.Length)
```

结果：

【讨论】：

当然，直接用CSS吧……我总是首先想到jQuery :P +1

【参考方案2】：

我不知道有任何 flexdashboard 选项。但是您可以使用 jQuery 来删除导航栏并将主体向上移动。只需在 YAML 之后包含以下 sn-p：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() 
  $('.navbar').remove();
  $('body').css('padding-top', '0px');
);
</script>

我认为这不会影响父文档的主导航栏。如果不是，它可能需要一些 lsight 修改。

【讨论】：

很棒的答案。这很好用。只是因为非 JS 人员添加到 rMarkdown 更容易，才给样式加分。感谢您的精彩回答！