Масштабирование индикатора flexdashboard в R

Я пытаюсь использовать 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)
})
```

Остальные диаграммы должны заполнить место. Вы знаете, как сделать этот датчик больше? Спасибо!


r scaling shiny gauge flexdashboard
person user38129    schedule 25.08.2017    source источник

Ответы (1)


arrow_upward
4
arrow_downward

В конце концов, это может быть не слишком сложно. Настоящая проблема, похоже, заключается в justgage.css, который фиксирует высоту до 160 пикселей. Вы можете переопределить это, добавив собственный 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 будет находиться в том же каталоге, что и ваш основной документ.

person RolandASc    schedule 13.02.2019
comment
Дополнительный вопрос: как убрать рамку/тень поля шкалы? - person JdP; 10.04.2019
comment
Вы также можете добавить CSS в верхний блок сразу после заголовка YAML между двумя тегами <style>, если вы не хотите создавать тег extra.css. Это отличный ответ для масштабирования датчиков, но я определенно ценю его. - person mysteRious; 28.04.2020