时间戳

首页 > 解决方案 > 如何使图像可点击以显示子集 Dataframe ？(R 闪亮)

javascript - 如何使图像可点击以显示子集 Dataframe ？(R 闪亮)

问题描述

您好，我是 RShiny 的新手，我正在尝试为项目构建应用程序。

我的用户界面中有 5 个图像我想让它们可点击：当您单击图像时，它会在 mainPanel 中显示数据框的子集。

我的 Dataframe 包含一个名为“Mood”的列，有 5 种心情（“Party and Dance”、“Rap”、“Happy vibes”、“Sunday Chillout”和“Roadtrip music”）。每个图像应显示其中一种情绪的行。

这是我现在使用的代码：

用户界面


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%"))
 ))))

服务器.R

现在我刚刚设法将选择框链接到子集数据框，但我想摆脱它，只使用图像。 


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))})

})

任何反馈将不胜感激！谢谢 ！

这就是我的界面的样子

标签： javascriptrshinyonclickshinyjs

解决方案

自从我使用 Shiny 已经有一段时间了，所以我可能有点生疏了。但这里有一种可能的方法来解决您的问题：您可以使用 areactiveValue来跟踪选择了哪种心情，并在单击其中一个图像时更新该变量。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)

推荐阅读