我有一个闪亮的应用程序，它通过htmlOutput显示一个区域的名称。现在这些区域有一个相应的类别--A / B / C，并根据类别== A，B，CI是否想要将htmlOutput的背景颜色设置为＆＃39; red＆＃39;，＆＃39; blue＆＃ 39;，＆＃39;绿色＆＃39;
我不知道如何有条件地改变背景颜色。我对CSS很新。
到目前为止，我已经能够设置背景色但不能通过使用ui.R中的以下代码来更改它（其中dist是用于htmlOutput显示区域的标记）：
HTML('
#dist{
background-color: rgba(255,0,255,0.9);
}
')
下面的可重复示例：
library(shiny)
ui <- fluidPage(
titlePanel("Test App"),
selectInput("yours", choices = c("India", "Malaysia","Russia","Poland", "Hungary"), label = "Select Country:"),
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
style="padding-left: 8px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px",
draggable = TRUE, top = 126, left = "auto", right = 20, bottom = "auto",
width = 250, height = "auto",
htmlOutput("sel"), br(),htmlOutput("sel2")
)
)
server <- function(input, output){
catg<- c("A","A","B","C","A")
country <- c("India", "Malaysia","Russia","Poland", "Hungary")
countries <- data.frame(catg,country)
output$sel <- renderText({
paste0("Change my background color and of the text to my right based on variable catg:",input$yours,"-", countries$catg[countries$country==input$yours])
})
output$sel2 <- renderText({
paste0("DON'T change my background color:", countries$catg[countries$country==input$yours])
})
}
# Run the application
shinyApp(ui = ui, server = server)
这里我们有两个输出变量 - sel，sel2 我想根据变量＆＃34; catg＆＃34;来改变sel的背景颜色，即给#sel background-color：红色如果catg ==＆＃34; A＆＃34 ;, background-color：blue;如果catg ==＆＃34; B＆＃34;等等
答案 0 :(得分：2)
您可以通过使用renderUI函数在服务器中创建htmlOutput并向数据集添加颜色列并在CSS中创建三个变量类来实现此目的。这是有效的，但我个人会使用一个单独的CSS文件，并在全局，UI和服务器文件之间分配R代码。
library(shiny)
catg<- c("A","A","B","C","A")
country <- c("India", "Malaysia","Russia","Poland", "Hungary")
colour <- c("sel-green", "sel-green","sel-red","sel-blue", "sel-green")
countries <- data.frame(catg,country, colour)
ui <- fluidPage(
tags$head(
tags$style(
# Colorize the actionButton.
HTML(
'
.sel-green{
background-color:#7FFF00;
}
.sel-red{
background-color:#DC143C;
}
.sel-blue{
background-color:#0000FF;
}
'
)
)
),
titlePanel("Test App"),
selectInput("yours", choices = c("India", "Malaysia","Russia","Poland", "Hungary"), label = "Select Country:"),
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
style="padding-left: 8px; padding-right: 8px; padding-top: 8px; padding-bottom: 8px",
draggable = TRUE, top = 126, left = "auto", right = 20, bottom = "auto",
width = 250, height = "auto",
uiOutput("textBox", width = 10),
br(),
htmlOutput("sel2")
)
)
server <- function(input, output){
observe({
backgroundColour <<- as.character(countries$colour[countries$country==input$yours])
output$sel <- renderText({
paste0("Change my background color and of the text to my right based on variable catg:",input$yours,"-", countries$catg[countries$country==input$yours])
})
output$sel2 <- renderText({
paste0("DON'T change my background color:", countries$catg[countries$country==input$yours])
})
output$textBox <- renderUI({
htmlOutput("sel", class=backgroundColour)
})
})
}
# Run the application
shinyApp(ui = ui, server = server)
希望这会有所帮助。
答案 1 :(得分：2)
您可以将renderText中的文字换成额外的div，并使用内联CSS设置背景颜色：
output$sel <- renderText({
background_color = color_code[countries$catg[countries$country==input$yours],"color"]
HTML(paste0("<div style='background-color:",background_color,"'>",
paste0("Change my background color and of the text to my right based on variable catg:",input$yours,"-", countries$catg[countries$country==input$yours]),
"</div>"))
})
我在您的应用顶部添加了一个查找表，以确定每个国家/地区的颜色：
color_code = data.frame(catg=c("A","B","C"),color=c("red","blue","green"))
答案 2 :(得分：0)
我认为对于这些事情，最佳实践需要一些JavaScript（知道这一点也很好，因为它可以推广到很多东西），这可以很容易地实现。毕竟，这就是shiny:inputchanged存在闪亮的原因。
我在这里添加的唯一内容是JavaScript函数（带注释）以及一些用于将sel id作为红色启动的CSS，因为India是最初选择的值。
ui <-
fluidPage(
tags$head(HTML('
<script>
//shiny:inputchanged runs the function when an event is changed
$(document).on("shiny:inputchanged", function(event) {
//in this case the event is <yours>
if (event.name === "yours") {
//var strUser gets the selected option
var e = document.getElementById("yours");
var strUser = e.options[e.selectedIndex].text;
//color changes according to country
if (strUser == "Poland") {
$("#sel").css({"background-color":"green"})
} else if(strUser == "Russia") {
$("#sel").css({"background-color":"blue"})
} else {
$("#sel").css({"background-color":"red"})
}
}
});
</script>
')),
tags$head(tags$style('#sel {background-color: red;')),
titlePanel("Test App"),
selectInput("yours", choices = c("India", "Malaysia","Russia","Poland", "Hungary"),
label = "Select Country:"),
absolutePanel(id = "controls", class = "panel panel-default", fixed = TRUE,
style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px",
draggable = TRUE, top = 126, left = "auto", right = 20, bottom = "auto",
width = 250, height = "auto",
htmlOutput("sel"), br(),htmlOutput("sel2")
))
注意：此处的最佳做法是将JavaScript代码添加到.js文件中，并在ui中添加includeScript。
这里没有改变任何东西。
server <- function(input, output){
catg<- c("A","A","B","C","A")
country <- c("India", "Malaysia","Russia","Poland", "Hungary")
countries <- data.frame(catg,country)
output$sel <- renderText({
paste0("Change my background color and of the text to my right based on variable catg:",
input$yours,"-",
countries$catg[countries$country==input$yours])
})
output$sel2 <- renderText({
paste0("DON'T change my background color:",
countries$catg[countries$country==input$yours])
})
}
shinyApp(ui = ui, server = server)