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

Question

有没有办法在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)
  })
    }
      )

- Jaliya

---

实际上，我想在悬停时在此表中显示来自不同表的值。 - Jaliya

Answer 1

完全有可能实现，但是你的 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)
    })
  }
)

- K. Rohde

---

实际上我的目的有些不同。我不需要在同一张表格中显示单元格的值。我有两个表格（我们称之为A和B）。当鼠标指针位于表格A中的单元格[x,y]时，我想显示一个悬停工具提示，其中包含表格B中单元格[x,y]的值。你能帮我解决这个问题吗？ - Jaliya

@K. Rohde：感谢您提供的示例。您能否分享一下如何将悬停单元格信息显示为工具提示或弹出窗口，而不是在表格底部打印它？ - Siddharth Gosalia