在 R 中缩放 flexdashboard 仪表

Posted 2023-03-24

【中文标题】在 R 中缩放 flexdashboard 仪表

【英文标题】：Scaling flexdashboard gauge in R

【发布时间】：2018-02-03 05:15:25

【问题描述】：

我正在尝试使用flexdashboard::gauge，但它始终是相同的大小（不缩放）并且我不知道如何更改它的大小。我知道有一种方法可以使用renderPlot 并设置例如height 来处理普通绘图。有没有办法用 renderGauge 做类似的事情？

这是我的代码：

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
runtime: shiny    
---



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


Column .sidebar
-----------------------------------------------------------------------

```r
selectInput("n", label = "Number of bins:",
            choices = c(10, 20, 35, 50), selected = 20)
```



Column data-width=500
-----------------------------------------------------------------------


### Gauge

```r
renderGauge(
    invalidateLater(1000, session)
    dane <- round(runif(1,0,100))
    df <- data.frame(Label = "IRR", Value = as.numeric(dane))
    gauge(dane, min = 0, max = 100, symbol = '%', gaugeSectors(
  success = c(80, 100), warning = c(40, 79), danger = c(0, 39)
))
  )

```

### Chart A

```r 
renderPlot(
  plot(1:10,1:10)
)
```


Column data-width=500
-----------------------------------------------------------------------

### Chart B

```r
renderPlot(
  plot(1:10,1:10)
)
```

### Chart C

```r
renderPlot(
  plot(1:10,1:10)
)
```

其余的图表将填补这个位置。 你知道怎么把这个量规变大吗？ 谢谢！

【参考方案1】：

毕竟这可能不会太难。真正的问题似乎在于justgage.css，它将高度固定为160px。您可以通过添加自定义 css 来覆盖它，例如通过以下方式：

文件extra.css：

.html-widget.gauge 
  height: 100%; /*or try sth like 320px instead of 100%, whatever you prefer*/


.html-widget.gauge svg 
  height: 100%; /*or try sth like 320px instead of 100%, whatever you prefer*/
  margin-top: -10px;
  margin-bottom: -40px;

然后编辑文档的 yaml 标题，如下所示：

---
title: "Test"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    css: extra.css
runtime: shiny
---

这要求文件 extra.css 与您的主文档位于同一目录中。

【讨论】：

另外一个问题：如何去除仪表框的边框/阴影？

如果您不想创建extra.css，也可以在两个<style> 标记之间的YAML 标头之后的顶部块中添加CSS。不过，这是缩放仪表的一个很好的答案，非常感谢。