r - R flexdashboard垂直滚动切断图形
问题描述
我正在尝试制作一个垂直滚动的 flexdashboard。有时,垂直滚动无法正常工作,下图被截断。这可以通过使窗口变窄来“修复”,然后它会滚动,但显然这不是一个可接受的解决方案。
代码如下,以及滚动不良的屏幕截图。可以看到最终图形的内容被截断了。我还包含了所需滚动行为的图片。我知道代码片段有点长,但是当然滚动行为只有在适当数量的图表中才会显现出来。
这是所需的滚动行为:
这是获得的裁剪滚动条和隐藏图:
---
title: "Untitled"
output: flexdashboard::flex_dashboard
orientation: row
vertical_layout: scroll
---
```{r setup, include=FALSE}
library(flexdashboard)
library(plotly)
dataset <- mtcars
```
Page 1
================================
Row
-----------------------------------------------------------------------
### ValueBox 1
```{r}
valueBox(42, caption = "my caption", icon = "fa-calendar")
```
### ValueBox 2
```{r}
valueBox(250, caption = "my caption", icon = "fa-calendar")
```
### Additional Info
```{r}
sector_levels <- gaugeSectors(success = c(0, 40),
warning = c(40, 60),
danger = c(60, 100),
colors= c("red", "yellow", "green"))
g1 <- gauge(25, min = 0, max = 100, sectors = sector_levels)
g2 <- gauge(75, min = 0, max = 100, sectors = sector_levels)
g1
g2
```
### Chart B
```{r}
color_map <- c("4" = "red", "6" = "green", "8" ="blue")
plot1 <- plot_ly(data = dataset, x = ~dataset$cyl, color = ~as.factor(cyl), colors = color_map,
type = "histogram")
plot1 <- plot1 %>% layout(legend = c, xaxis = list(title = "Also a Test"))
plot1
```
解决方案
如果有人感兴趣,我已经通过在 CSS 中应用最小高度值来管理解决方法。所需的 CSS 代码是:
.chart-stage-flex{
min-height: 500px;
}
这可能是一个 hack,但似乎按预期工作。
推荐阅读
- javascript - 将 nextSibling 转换为 Input
- angular - 从多个可观察值创建可观察值
- function - 如何在 Ionic 加载期间调用函数?
- docker - 无法使用 docker-compose 在 Docker 容器中运行 Traefik
- mysql - 同一张表MySQL的递归查询
- c# - 指定的强制转换无效数据集
- swiftui - 在 SwiftUI 中检测 Siri Remote 滑动
- python - 从独角兽启动蛋糕服务器时未安装错误
- android - 不同xml版本文件夹的条件代码(NavigationView)
- gps - 来自 GPS 接收器的垃圾数据