[英]Reactively changing colour of an infobox, upon a click or hover over
I would like to use the reactiveValue
, observe
, observeEvent
framework in shiny
and shinydashboard
to be able to reactively change the colour of an infoBox when clicked.我想在
shiny
和shinydashboard
使用reactiveValue
、 observe
、 observeEvent
框架,以便能够在单击时被动地改变infoBox 的颜色。
I would also like it to display an image with some text in a popup box when hovering over the infoBox.我还希望它在将鼠标悬停在 infoBox 上时在弹出框中显示带有一些文本的图像。
As a basis of code as a reproducible example, please see this作为可重现示例的代码基础,请参阅此
But the code is availible below:但是下面的代码是可用的:
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(title = "Info boxes"),
dashboardSidebar(),
dashboardBody(
# infoBoxes with fill=FALSE
fluidRow(
# A static infoBox
infoBox("New Orders", 10 * 2, icon = icon("credit-card")),
# Dynamic infoBoxes
infoBoxOutput("progressBox"),
infoBoxOutput("approvalBox")
),
# infoBoxes with fill=TRUE
fluidRow(
infoBox("New Orders", 10 * 2, icon = icon("credit-card"), fill = TRUE),
infoBoxOutput("progressBox2"),
infoBoxOutput("approvalBox2")
),
fluidRow(
# Clicking this will increment the progress amount
box(width = 4, actionButton("count", "Increment progress"))
)
)
)
server <- function(input, output) {
output$progressBox <- renderInfoBox({
infoBox(
"Progress", paste0(25 + input$count, "%"), icon = icon("list"),
color = "purple"
)
})
output$approvalBox <- renderInfoBox({
infoBox(
"Approval", "80%", icon = icon("thumbs-up", lib = "glyphicon"),
color = "yellow"
)
})
# Same as above, but with fill=TRUE
output$progressBox2 <- renderInfoBox({
infoBox(
"Progress", paste0(25 + input$count, "%"), icon = icon("list"),
color = "purple", fill = TRUE
)
})
output$approvalBox2 <- renderInfoBox({
infoBox(
"Approval", "80%", icon = icon("thumbs-up", lib = "glyphicon"),
color = "yellow", fill = TRUE
)
})
}
shinyApp(ui, server)
Is that possible?那可能吗?
What you want to do can be completely done with CSS and JavaScript, not shiny.你想做的事情完全可以用 CSS 和 JavaScript 来完成,而不是闪亮。 Here is one possible solution (there are many ways to achieve what you want).
这是一种可能的解决方案(有很多方法可以实现您想要的)。
Any info box you hover over will change to gray and when you click it will change to a different gray.您悬停在其上的任何信息框都将变为灰色,当您单击它时,它将变为不同的灰色。 The first info box (top-left) will also show a popup with an image in it when you hover over it.
当您将鼠标悬停在第一个信息框(左上角)上时,它还会显示一个带有图像的弹出窗口。 To address the question of how to change the background colour on hover/click, I just added a bit of CSS.
为了解决如何在悬停/单击时更改背景颜色的问题,我只添加了一些 CSS。 To have a popup on hover that shows an image, I used Bootstrap's popover.
为了在悬停时显示图像的弹出窗口,我使用了 Bootstrap 的弹出窗口。 It's fairly simple, hope it helps
很简单,希望能帮到你
library(shinydashboard)
mycss <- "
.info-box:hover,
.info-box:hover .info-box-icon {
background-color: #aaa !important;
}
.info-box:active,
.info-box:active .info-box-icon {
background-color: #ccc !important;
}
"
withPopup <- function(tag) {
content <- div("Some text and an image",
img(src = "http://thinkspace.com/wp-content/uploads/2013/12/member-logo-rstudio-109x70.png"))
tagAppendAttributes(
tag,
`data-toggle` = "popover",
`data-html` = "true",
`data-trigger` = "hover",
`data-content` = content
)
}
ui <- dashboardPage(
dashboardHeader(title = "Info boxes"),
dashboardSidebar(),
dashboardBody(
tags$head(tags$style(HTML(mycss))),
tags$head(tags$script("$(function() { $(\"[data-toggle='popover']\").popover(); })")),
# infoBoxes with fill=FALSE
fluidRow(
# A static infoBox
withPopup(infoBox("New Orders", 10 * 2, icon = icon("credit-card"))),
# Dynamic infoBoxes
infoBoxOutput("progressBox"),
infoBoxOutput("approvalBox")
),
# infoBoxes with fill=TRUE
fluidRow(
infoBox("New Orders", 10 * 2, icon = icon("credit-card"), fill = TRUE),
infoBoxOutput("progressBox2"),
infoBoxOutput("approvalBox2")
),
fluidRow(
# Clicking this will increment the progress amount
box(width = 4, actionButton("count", "Increment progress"))
)
)
)
server <- function(input, output) {
output$progressBox <- renderInfoBox({
infoBox(
"Progress", paste0(25 + input$count, "%"), icon = icon("list"),
color = "purple"
)
})
output$approvalBox <- renderInfoBox({
infoBox(
"Approval", "80%", icon = icon("thumbs-up", lib = "glyphicon"),
color = "yellow"
)
})
# Same as above, but with fill=TRUE
output$progressBox2 <- renderInfoBox({
infoBox(
"Progress", paste0(25 + input$count, "%"), icon = icon("list"),
color = "purple", fill = TRUE
)
})
output$approvalBox2 <- renderInfoBox({
infoBox(
"Approval", "80%", icon = icon("thumbs-up", lib = "glyphicon"),
color = "yellow", fill = TRUE
)
})
}
shinyApp(ui, server)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.