如何使用反应性数据更改 shiny 应用程序中 flexdashbord::gauge 的标签?
How change flexdashbord::gauge's label in shiny application with reactive data?
我希望仪表标签随着值的变化而变化。
我创建了 f_3
函数来尝试调整它,但没有成功。
我的rmarkdown
代码:
---
title: "Label of gauge"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: yeti
---
side{.sidebar}
-------------------------------------------
```{r}
library(tibble)
library(shiny)
library(shinyWidgets)
library(flexdashboard)
```
**Analysis**
```{r}
autonumericInput(
inputId = "a",
value = 10,
label = "Value 1",
align = "center",
currencySymbol = "$",
currencySymbolPlacement = "p",
digitGroupSeparator = ".",
decimalCharacter = ",",
decimalPlaces = 0,
minimumValue = 0,
maximumValue = 100
)
autonumericInput(
inputId = "b",
value = 10,
label = "Value 2",
align = "center",
currencySymbol = "R$",
currencySymbolPlacement = "p",
digitGroupSeparator = ".",
decimalCharacter = ",",
decimalPlaces = 0,
minimumValue = 0,
maximumValue = 100
)
```
```{r}
f_1 <- function(a, b) {
a + b
}
reac <- reactive({
tibble(
a = input$a,
b = input$b
)
})
pred <- reactive({
temp <- reac()
f_1(
a = input$a,
b = input$b
)
})
```
abc{}
--------------------------------------
###
```{r}
f_3 <- function(x) {
if (x <= 40) {
"Danger"
} else if (x <= 80) {
"Warning"
} else ("Success")
}
renderGauge({
gauge(
value = round(x = pred(), digits = 0), min = 0, max = 100, symbol = "%",
label = f_3(x = pred())
)
})
```
标签的值始终显示为 Danger
,即使值发生变化也是如此。你可以做些什么让它随着值的变化而变化?
这对我来说就像是一个错误。您可以在 {flexdashboard} github 中提出问题并告诉他们解决它。
同时,我为您准备了一个解决方法。这需要你对 Shiny 有一些深入的了解,我想这超出了你目前所学的范围,所以我不会解释细节。如果您有兴趣,请阅读此 article。简而言之,我们编写自己的 Shiny 方法来与网络通信 UI 并更新 UI.
---
title: "Label of gauge"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: yeti
---
side{.sidebar}
-------------------------------------------
```{r}
library(tibble)
library(shiny)
library(shinyWidgets)
library(flexdashboard)
```
**Analysis**
```{r}
autonumericInput(
inputId = "a",
value = 10,
label = "Value 1",
align = "center",
currencySymbol = "$",
currencySymbolPlacement = "p",
digitGroupSeparator = ".",
decimalCharacter = ",",
decimalPlaces = 0,
minimumValue = 0,
maximumValue = 100
)
autonumericInput(
inputId = "b",
value = 10,
label = "Value 2",
align = "center",
currencySymbol = "R$",
currencySymbolPlacement = "p",
digitGroupSeparator = ".",
decimalCharacter = ",",
decimalPlaces = 0,
minimumValue = 0,
maximumValue = 100
)
```
```{r}
f_1 <- function(a, b) {
a + b
}
reac <- reactive({
tibble(
a = input$a,
b = input$b
)
})
pred <- reactive({
temp <- reac()
f_1(
a = input$a,
b = input$b
)
})
```
abc{}
--------------------------------------
###
<div id="gauge">
```{r}
f_3 <- function(x) {
if (x <= 40) {
"Danger"
} else if (x <= 80) {
"Warning"
} else "Success"
}
renderGauge({
session$sendCustomMessage("gauge-text",list(text = f_3(x = pred())))
gauge(
value = round(x = pred(), digits = 0), min = 0, max = 100, symbol = "%",
label = "Danger"
)
})
```
<script>
Shiny.addCustomMessageHandler('gauge-text', data=>{
document.querySelector('#section-gauge svg text[font-size="10px"] tspan').innerHTML = data.text
})
</script>
</div>
我希望仪表标签随着值的变化而变化。
我创建了 f_3
函数来尝试调整它,但没有成功。
我的rmarkdown
代码:
---
title: "Label of gauge"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: yeti
---
side{.sidebar}
-------------------------------------------
```{r}
library(tibble)
library(shiny)
library(shinyWidgets)
library(flexdashboard)
```
**Analysis**
```{r}
autonumericInput(
inputId = "a",
value = 10,
label = "Value 1",
align = "center",
currencySymbol = "$",
currencySymbolPlacement = "p",
digitGroupSeparator = ".",
decimalCharacter = ",",
decimalPlaces = 0,
minimumValue = 0,
maximumValue = 100
)
autonumericInput(
inputId = "b",
value = 10,
label = "Value 2",
align = "center",
currencySymbol = "R$",
currencySymbolPlacement = "p",
digitGroupSeparator = ".",
decimalCharacter = ",",
decimalPlaces = 0,
minimumValue = 0,
maximumValue = 100
)
```
```{r}
f_1 <- function(a, b) {
a + b
}
reac <- reactive({
tibble(
a = input$a,
b = input$b
)
})
pred <- reactive({
temp <- reac()
f_1(
a = input$a,
b = input$b
)
})
```
abc{}
--------------------------------------
###
```{r}
f_3 <- function(x) {
if (x <= 40) {
"Danger"
} else if (x <= 80) {
"Warning"
} else ("Success")
}
renderGauge({
gauge(
value = round(x = pred(), digits = 0), min = 0, max = 100, symbol = "%",
label = f_3(x = pred())
)
})
```
标签的值始终显示为 Danger
,即使值发生变化也是如此。你可以做些什么让它随着值的变化而变化?
这对我来说就像是一个错误。您可以在 {flexdashboard} github 中提出问题并告诉他们解决它。
同时,我为您准备了一个解决方法。这需要你对 Shiny 有一些深入的了解,我想这超出了你目前所学的范围,所以我不会解释细节。如果您有兴趣,请阅读此 article。简而言之,我们编写自己的 Shiny 方法来与网络通信 UI 并更新 UI.
---
title: "Label of gauge"
runtime: shiny
output:
flexdashboard::flex_dashboard:
orientation: rows
vertical_layout: fill
theme: yeti
---
side{.sidebar}
-------------------------------------------
```{r}
library(tibble)
library(shiny)
library(shinyWidgets)
library(flexdashboard)
```
**Analysis**
```{r}
autonumericInput(
inputId = "a",
value = 10,
label = "Value 1",
align = "center",
currencySymbol = "$",
currencySymbolPlacement = "p",
digitGroupSeparator = ".",
decimalCharacter = ",",
decimalPlaces = 0,
minimumValue = 0,
maximumValue = 100
)
autonumericInput(
inputId = "b",
value = 10,
label = "Value 2",
align = "center",
currencySymbol = "R$",
currencySymbolPlacement = "p",
digitGroupSeparator = ".",
decimalCharacter = ",",
decimalPlaces = 0,
minimumValue = 0,
maximumValue = 100
)
```
```{r}
f_1 <- function(a, b) {
a + b
}
reac <- reactive({
tibble(
a = input$a,
b = input$b
)
})
pred <- reactive({
temp <- reac()
f_1(
a = input$a,
b = input$b
)
})
```
abc{}
--------------------------------------
###
<div id="gauge">
```{r}
f_3 <- function(x) {
if (x <= 40) {
"Danger"
} else if (x <= 80) {
"Warning"
} else "Success"
}
renderGauge({
session$sendCustomMessage("gauge-text",list(text = f_3(x = pred())))
gauge(
value = round(x = pred(), digits = 0), min = 0, max = 100, symbol = "%",
label = "Danger"
)
})
```
<script>
Shiny.addCustomMessageHandler('gauge-text', data=>{
document.querySelector('#section-gauge svg text[font-size="10px"] tspan').innerHTML = data.text
})
</script>
</div>