在 R 中缩放 flexdashboard 仪表 [英] Scaling flexdashboard gauge in R

问题描述

我正在尝试使用 flexdashboard::gauge，但它总是相同的大小(不缩放)，我不知道如何更改它的大小.我知道有一种方法可以使用 renderPlot 并设置例如 height 来为普通图执行此操作.有没有办法用 renderGauge 做类似的事情?

I'm trying to use flexdashboard::gauge, but it is always the same size(doesn't scale) and I don't know how to change it's size. I know there is a way to do this for normal plots using renderPlot and setting for example height. Is there a way to do something similar with 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)
})
```

其余的图表将填补这个位置.你知道如何使这个仪表变大吗?谢谢！

The rest of charts are to fill the place. Do you know how to make this gauge bigger? Thanks!

推荐答案

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

This might not be too hard after all. The real problem seems to lie in justgage.css, which fixes the height to 160px. You can override this by adding custom css, for example in the following way:

文件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 标题，如下所示:

And then edit the yaml header of your document like below:

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

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

This expects the file extra.css to be in the same directory as your main document.

这篇关于在 R 中缩放 flexdashboard 仪表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！