时间戳

首页 > 解决方案 > 如何在表格排序后从表格列引用中动态呈现图像

r - 如何在表格排序后从表格列引用中动态呈现图像

问题描述

我试图让与数据行关联的图像在过滤后显示在按钮单击上。这可以在信息框中，也可以单独在桌子下方。

我还尝试让图像只显示在表格中，但它们太小而无法使用，所以如果它们可以与表格分开以便我可以指定大小会更好。

我有一个包含以下信息的 .csv 文件，并且正在尝试存储在本地或网络上的图像（因此有两个图像列）。

.csv 示例 ID、连续、破碎、PB、Lips L、Lips R、Sig。多尔。或 ped。疤痕，图像（在 www 文件夹中），ImageTest

1820,Y,N,2,Y,Y,Y,1820CelloHeadshot.jpg, http://rwcatalog.neaq.org/ImageViewer.aspx?ImageId=826703

到目前为止，这就是我所拥有的适用于表格和排序的编码：

library(shiny)
library(DT)
library(tidyverse)

# default global search value
if (!exists("default_search")) default_search <- ""

# default column search values
if (!exists("default_search_columns")) default_search_columns <- NULL

# Define UI for data upload app ----
ui <- fluidPage(

# App title ----
titlePanel(title = h1("Upload file and select columns", align = "center")),

 # Sidebar layout with input and output definitions ----
sidebarLayout(

  # Sidebar panel for inputs ----
sidebarPanel(

  # Input: Select a file ----
  fileInput("uploaded_file", "Choose CSV File",
            multiple = TRUE,
            accept = c("text/csv",
                       "text/comma-separated-values,text/plain",
                       ".csv")),

  # Horizontal line ----
  tags$hr(),

  # Input: Checkbox if file has header ----
  checkboxInput("header", "Header", TRUE),

  # Input: Select separator ----
  radioButtons("sep", "Separator",
               choices = c(Semicolon = ";",
                           Comma = ",",
                           Tab = "\t"),
               selected = ","),


  # Horizontal line ----
  tags$hr(),

  # Input: Select number of rows to display ----
  radioButtons("disp", "Display",
               choices = c(All = "all",
                           Head = "head"),
               selected = "all"),

  # Select variables to display ----
  uiOutput("checkbox")

),

# Main panel for displaying outputs ----
mainPanel(

  tabsetPanel(
    id = "dataset",
    tabPanel("FILE", DT::dataTableOutput("rendered_file"))
  )
)

 )
  )

# Define server logic to read selected file ----
server <- function(input, output, session) {

 # Read file ----
 df <- reactive({
 req(input$uploaded_file)
 read.csv(input$uploaded_file$datapath,
         header = input$header,
         sep = input$sep)  

  })

  # Dynamically generate UI input when data is uploaded ----
  output$checkbox <- renderUI({
checkboxGroupInput(inputId = "select_var", 
                   label = "Select variables", 
                   choices = names(df()))
  })

 # Select columns to print ----
  df_sel <- reactive({
  req(input$select_var)
  df_sel <- df() %>% select(input$select_var)
   })

  # Print data table ----  
  output$rendered_file <- DT::renderDataTable(

class = "display nowrap compact",
filter = "top",

{
if(input$disp == "head") {
  head(df_sel())
}
else {
  df_sel()
}
  })

}

# Create Shiny app ----
shinyApp(ui, server)

这部分工作正常，我只是不确定如何为一个按钮编写代码，该按钮指定我只想保存和渲染过滤结果中的图像。任何帮助或想法将不胜感激！

标签： rshiny

解决方案

是的，这就是我的想法！但是，当我添加 .csv 的上传时，我似乎无法正确显示它。我在原始侧边栏中取出了一些其他内容，以找出问题所在。我将图像列重命名为“whaleimage”。

library(shiny)
library(DT)
library(tidyverse)

# Define UI for data upload app ----
ui <- fluidPage(

# App title ----
titlePanel(title = h1("Upload file and select columns", align = "center")),

# Sidebar layout with input and output definitions ----
sidebarLayout(

# Sidebar panel for inputs ----
sidebarPanel(

  # Input: Select a file ----
  fileInput("whaleid", "Choose CSV File",
            multiple = TRUE,
            accept = c("text/csv",
                       "text/comma-separated-values,text/plain",
                       ".csv")),

  # Horizontal line ----
  tags$hr(),


  # Select variables to display ----
  DTOutput("table"),
  uiOutput("images")

),

# Main panel for displaying outputs ----
mainPanel(
  tableOutput("table"),
imageOutput("images"))
))

server <- function(input, output){

output$table <- renderDT({
datatable(whaleid, filter = "top")
})

df <- reactive({
whaleid[input$table_rows_current, ]
})

output$images <- renderUI({
imgs <- lapply(df()$whaleimage, function(whaleimage){
  tags$div(
    tags$img(src= whaleimage, width="100%"),
    style = "width: 400px;"
  )
})
do.call(tagList, imgs)
})

}

# Create Shiny app ----
shinyApp(ui, server)

推荐阅读