在每个单元格的Shiny数据表中显示工具提示或弹出窗口？ [英] Show a tooltip or popover in Shiny datatables for each cell?

问题描述

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

Is there any way to get a tooltip for each and every cell in datatable in r shiny? There are so many ways to get the hover row or column. But I could not find a way to get both row and column index and show a different hover tooltip for each and every cell. Can anyone modify the following code?

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 code。

It is entirely possible, but you messed up the callback code.

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

There was a typo in there, which failed the whole script. Additionally, you have to know that the callback should return the table object in order to work. If you dont, the table won't even be drawn.

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

Here is a corrected version with lighter logic.

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

编辑

回答评论，下面是一个有两个表格的版本。
但它是一种便宜的方式。

Edit

Answering the comment, below is a version with two tables. But it is kind of cheap way to do it.

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

这篇关于在每个单元格的Shiny数据表中显示工具提示或弹出窗口？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！