如何使图像可点击以显示子集数据框? (R闪亮)
How to make images clickable to display a subset Dataframe ? (R Shiny )
您好,我是 RShiny 的新手,我正在尝试为项目构建应用程序。
我的用户界面中有 5 张图片我想让它们可点击:当您点击图片时,它会在主面板中显示数据框的一个子集。
我的 Dataframe 包含一个名为 "Mood" 的列,并且有 5 种情绪("Party and Dance"、"Rap"、"Happy vibes"、"Sunday Chillout" 和 "Roadtrip music").每张图片都应显示其中一种情绪的行。
这是我现在使用的代码:
UI.R
shinyUI(
fluidPage( useShinyjs(),
headerPanel(
h1(img(src="logo.png",height = 70, width = 70),"Quelle est votre humeur du moment ?",
style = "font-weight: 500; color: #FFFFFF;")),
dashboardSidebar(
fluidRow(
column(width=11.9, align="center",
selectInput("Mood", label= "Choose your Mood : ",
choices = test$Mood),
img(id="my_img1",src="party.jfif",width="19.5%",style="cursor:pointer;"),
img(id="my_img2",src="cluster 2.jpg",width="19.5%",style="cursor:pointer;"),
img(id="my_img3",src="roadtrip.jpg",width="19.5%",style="cursor:pointer;"),
img(id="my_img4",src="rap.jfif",width="19.5%",style="cursor:pointer;"),
img(id="my_img5",src="sunday.jpg",width="19.5%",style="cursor:pointer;")),
column(11.2, align="center",
mainPanel(br(),br(),DT::dataTableOutput("dynamic"), width = "100%"))
))))
Server.R
现在我刚刚设法 link 将 Select 框添加到子集数据框,但我想摆脱它并只使用图像。
shinyServer(function(input,output){
output$dynamic<- DT::renderDataTable({
data <- DT::datatable(test[test$Mood ==input$Mood, c("Song","Artist","Mood","Listen to song"), drop = FALSE], escape = FALSE)
data
})
})
我尝试了很多组合,但都失败了,因为我不了解 Shinyjs 的工作原理。
我最后一次尝试:(我考虑过为每张图片手动执行此操作,但当然行不通)
shinyServer(function(input,output){
onclick("my_img1", { print(datatable(test[test$Mood =="Party and dance", c("Song","Artist","Mood","Listen to song"), drop = FALSE], escape = FALSE))})
})
如有任何反馈,我们将不胜感激!!谢谢 !
这是我的界面的样子
我已经有一段时间没有使用 Shiny 了,所以我可能有点生疏了。但这里有一种可能的方法来解决您的问题:您可以使用 reactiveValue
来跟踪选择了哪种心情,并在单击其中一个图像时更新该变量。然后使用 reactiveValue
对 dataframe
进行子集化,如下所示。希望这对您有所帮助!
library(shiny)
library(shinyjs)
df = data.frame(mood = c('mood1','mood1','mood1','mood2','mood2','mood2'),
example = c('dog',' cat','bunny','elephant','t-rex','not dog'))
ui <- shinyUI(
fluidPage(
useShinyjs(),
img(id="my_img1",src="img1.png",width="19.5%",style="cursor:pointer;"),
img(id="my_img2",src="img1.png",width="19.5%",style="cursor:pointer;"),
DT::dataTableOutput("dynamic")
)
)
server <- shinyServer(function(input,output){
selected_mood <- reactiveVal()
shinyjs::onclick("my_img1", selected_mood('mood1'))
shinyjs::onclick("my_img2", selected_mood('mood2'))
output$dynamic<- DT::renderDataTable({
req(selected_mood())
df[df$mood == selected_mood(),]
})
})
shinyApp(ui, server)
您好,我是 RShiny 的新手,我正在尝试为项目构建应用程序。
我的用户界面中有 5 张图片我想让它们可点击:当您点击图片时,它会在主面板中显示数据框的一个子集。
我的 Dataframe 包含一个名为 "Mood" 的列,并且有 5 种情绪("Party and Dance"、"Rap"、"Happy vibes"、"Sunday Chillout" 和 "Roadtrip music").每张图片都应显示其中一种情绪的行。
这是我现在使用的代码:
UI.R
shinyUI(
fluidPage( useShinyjs(),
headerPanel(
h1(img(src="logo.png",height = 70, width = 70),"Quelle est votre humeur du moment ?",
style = "font-weight: 500; color: #FFFFFF;")),
dashboardSidebar(
fluidRow(
column(width=11.9, align="center",
selectInput("Mood", label= "Choose your Mood : ",
choices = test$Mood),
img(id="my_img1",src="party.jfif",width="19.5%",style="cursor:pointer;"),
img(id="my_img2",src="cluster 2.jpg",width="19.5%",style="cursor:pointer;"),
img(id="my_img3",src="roadtrip.jpg",width="19.5%",style="cursor:pointer;"),
img(id="my_img4",src="rap.jfif",width="19.5%",style="cursor:pointer;"),
img(id="my_img5",src="sunday.jpg",width="19.5%",style="cursor:pointer;")),
column(11.2, align="center",
mainPanel(br(),br(),DT::dataTableOutput("dynamic"), width = "100%"))
))))
Server.R
现在我刚刚设法 link 将 Select 框添加到子集数据框,但我想摆脱它并只使用图像。
shinyServer(function(input,output){
output$dynamic<- DT::renderDataTable({
data <- DT::datatable(test[test$Mood ==input$Mood, c("Song","Artist","Mood","Listen to song"), drop = FALSE], escape = FALSE)
data
})
})
我尝试了很多组合,但都失败了,因为我不了解 Shinyjs 的工作原理。
我最后一次尝试:(我考虑过为每张图片手动执行此操作,但当然行不通)
shinyServer(function(input,output){
onclick("my_img1", { print(datatable(test[test$Mood =="Party and dance", c("Song","Artist","Mood","Listen to song"), drop = FALSE], escape = FALSE))})
})
如有任何反馈,我们将不胜感激!!谢谢 !
这是我的界面的样子
我已经有一段时间没有使用 Shiny 了,所以我可能有点生疏了。但这里有一种可能的方法来解决您的问题:您可以使用 reactiveValue
来跟踪选择了哪种心情,并在单击其中一个图像时更新该变量。然后使用 reactiveValue
对 dataframe
进行子集化,如下所示。希望这对您有所帮助!
library(shiny)
library(shinyjs)
df = data.frame(mood = c('mood1','mood1','mood1','mood2','mood2','mood2'),
example = c('dog',' cat','bunny','elephant','t-rex','not dog'))
ui <- shinyUI(
fluidPage(
useShinyjs(),
img(id="my_img1",src="img1.png",width="19.5%",style="cursor:pointer;"),
img(id="my_img2",src="img1.png",width="19.5%",style="cursor:pointer;"),
DT::dataTableOutput("dynamic")
)
)
server <- shinyServer(function(input,output){
selected_mood <- reactiveVal()
shinyjs::onclick("my_img1", selected_mood('mood1'))
shinyjs::onclick("my_img2", selected_mood('mood2'))
output$dynamic<- DT::renderDataTable({
req(selected_mood())
df[df$mood == selected_mood(),]
})
})
shinyApp(ui, server)