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

Question

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

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

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