在每个单元格的Shiny数据表中显示工具提示或弹出窗口？

Posted 2021-05-03

有没有办法为r闪亮的数据表中的每个单元格获取工具提示？获取悬停行或列的方法有很多种。但我找不到获得行和列索引的方法，并为每个单元格显示不同的悬停工具提示。任何人都可以修改以下代码吗？

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    dataTableOutput('table'),
    verbatimTextOutput('hoverIndex'),
  ),

  server = function(server, input, output) {

    output$hoverIndex <- renderText({
      UI_out <- input$hoverIndexJS
      return(paste("hover column info", UI_out))
    })


    output$table <- renderDataTable({
      DT_out <- data.frame(`A` = 1:5, `B` = 11:15, `C` = LETTERS[1:5])
      DT_out <- datatable(DT_out
                          ,rownames = F
                          ,callback = JS("
                                         /* code for columns on hover */
                                         table.on('mouseenter', 'td', function() {
                                         var td = $(this);
                                         var col = table.cell( this ).index().columnVisible;
                                         var row = table.cell( this ).index().row;
                                         $('td[row][col]).attr('title', row+col);
                                         Shiny.onInputChange('hoverIndexJS', info_out);

                                         });"

                          )
                          )
      return(DT_out)
  })
    }
      )

答案

这完全有可能，但你搞砸了callback代码。

那里有一个拼写错误，整个剧本都失败了。此外，您必须知道回调应该返回表对象才能工作。如果你不这样，表格甚至都不会被绘制。

这是一个校正版本，逻辑更轻。

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    dataTableOutput('table'),
    verbatimTextOutput('hoverIndex')
  ),

  server = function(server, input, output) {

    output$hoverIndex <- renderText({
      paste("hover column info", input$hoverIndexJS)
    })

    output$table <- renderDataTable({
      datatable(data.frame(`A` = 1:5, `B` = 11:15, `C` = LETTERS[1:5]),
                rownames = F,
                callback = JS("
                  table.on('mouseenter', 'td', function() {
                    Shiny.onInputChange('hoverIndexJS', this.innerhtml);
                  });
                  return table;
                ")
      )
    })
  }
)

编辑

回答评论，下面是一个有两个表的版本。但这是一种廉价的方式。

library(shiny)
library(DT)

shinyApp(
  ui = fluidPage(
    dataTableOutput('tableWithHoverEffect'),
    dataTableOutput('tableWithHoverData')
  ),

  server = function(session, input, output) {

    observeEvent(input$hoveredCellInfo, {
      info <- input$hoveredCellInfo
      content <- as.character(table2[info$row, info$column])
    })

    table1 <- data.frame(A = 1:5, B = 11:15, C = LETTERS[1:5])
    table2 <- data.frame(D = 10:14, E = LETTERS[6:10], F = c(T, F, F, T, T))

    output$tableWithHoverEffect <- renderDataTable({
      datatable(table1, rownames = F,
                callback = JS("
                              table.on('mouseenter', 'tbody td', function() {
                                var column = $(this).index();
                                var row = $(this).parent().index();

                                var dataFromOtherTable = $('#tableWithHoverData').find('tbody tr').eq(row).find('td').eq(column).text();

                                this.setAttribute('title', dataFromOtherTable);
                              });

                              return table;
                              ")
                )
    })

    output$tableWithHoverData <- renderDataTable({
      datatable(table2, rownames = F)
    })
  }
)