【问题标题】:tooltip or popover in Shiny datatables for row names?行名称的闪亮数据表中的工具提示或弹出框?
【发布时间】:2017-02-19 13:45:03
【问题描述】:

当用户将鼠标悬停在/单击数据表的行名称上时,我一直在尝试包含诸如工具提示或弹出框之类的附加信息,因此他们不必查找一些定义,我目前在不同的 tabPanel 上有。这是一个工作示例:

server.R:

library(shiny)
library(DT)
library(shinyBS)

# Define server for the Shiny app
shinyServer(function(input, output,session) {

tdata <- as.data.frame(iris)

# Render table here 
output$mytable <- DT::renderDataTable(DT::datatable(

   tdata[1:5,],

   options = list(paging = FALSE, searching = FALSE, info = FALSE, sort = FALSE,
                 columnDefs=list(list(targets=1:4, class="dt-right")) ),

   rownames = paste("rowname",1:5),

   container = htmltools::withTags(table(
      class = 'display',
      thead(
         tr(lapply(rep(c('ratios','name1', 'name2', 'name3','name4','name5'), 1),th))
      )
   ))
))

}) # end of shinyServer function

ui.R:

library(shiny)
library(DT)
library(shinyBS)

shinyUI(
   mainPanel(
      DT::dataTableOutput("mytable")
   )   
)      

请注意,我看到了以下讨论主题,但没有成功: R shiny mouseover text for table columns,还有 Add bootstrap tooltip to column header in shiny app 所以我在考虑 DT-package 选项中的一些东西,或者使用 shinyBS 包的东西(比如'bsTooltip')或者添加一些 HTML 或 JS。 Shiny 在数据表中似乎并不自然地支持此工具提示/弹出框功能...!?

【问题讨论】:

    标签: r tooltip shiny dt


    【解决方案1】:

    此代码有效,但在客户端模式下运行。为了简单起见,我使用了 iris 数据集的前五行,但我想这个想法很清楚。如果将鼠标悬停在行名称上,将显示工具提示。

    ui.R

        library(shiny)
        library(DT)
        shinyUI(
                mainPanel(
                        DT::dataTableOutput("tbl")
                )   
        )    
    

    服务器.R

        library(shiny)
        library(DT)
        shinyServer(function(input, output,session) {
                output$tbl = DT::renderDataTable(
                        datatable(iris[1:5, ], callback = JS("
                                        var tips = ['First row name', 'Second row name', 'Third row name',
                                        'Fourth row name', 'Fifth row name'],
                                        firstColumn = $('#tbl tr td:first-child');
                                        for (var i = 0; i < tips.length; i++) {
                                        $(firstColumn[i]).attr('title', tips[i]);
                                        }")), server = FALSE)
        }) 
    

    【讨论】:

    • 太棒了,行得通!我已经从列名的示例中编写了类似的内容,但是我忘记了 server=FALSE!感谢您的帮助,瓦尔特!
    【解决方案2】:

    它不起作用,因为您的代码没有使用 title 属性,该属性用于在悬停时显示标签。

    container = htmltools::withTags(table(
      class = 'display',
      thead(
        tr(lapply(rep(c('ratios','name1', 'name2', 'name3','name4','name5'), 1),th))
      )
    ))
    # OUTPUT OF CONTAINER
    #<table class="display">
    #  <thead>
    #    <tr>
    #      <th>ratios</th>
    #      <th>name1</th>
    #      <th>name2</th>
    #      <th>name3</th>
    #      <th>name4</th>
    #      <th>name5</th>
    #    </tr>
    #  </thead>
    #</table>
    

    我将您的代码更改为以下内容(使用 title 属性),现在它应该可以工作了:

    标签设置为columnLabels &lt;- paste0("label", 1:6),除此之外只有容器被更改。

      # Render table here 
      output$mytable <- DT::renderDataTable({
        columnLabels <- paste0("label", 1:6)
    
        DT::datatable(
          tdata[1:5,],
    
          options = list(paging = FALSE, searching = FALSE, info = FALSE, sort = FALSE,
                         columnDefs=list(list(targets=1:4, class="dt-right")) ),
    
          rownames = paste("rowname",1:5),
    
          container = htmltools::withTags(table(
            class = 'display',
            thead(
              #tags$th(title=active_columns[i], colnames(data)[i])
              tr(apply(data.frame(colnames=c('ratios','name1', 'name2', 'name3','name4','name5'), labels=columnLabels), 1,
                       function(x) th(title=x[2], x[1])))
            )
          ))
        )
      })
    # OUTPUT OF CONTAINER
    #<table class="display">
    #  <thead>
    #    <tr>
    #      <th title="label1">ratios</th>
    #      <th title="label2">name1</th>
    #      <th title="label3">name2</th>
    #      <th title="label4">name3</th>
    #      <th title="label5">name4</th>
    #      <th title="label6">name5</th>
    #    </tr>
    #  </thead>
    #</table>
    

    【讨论】:

    • 这会产生列标签,而不是行标签。我试图调整它以对行名做同样的事情但没有成功,但现在没有尝试太久,因为上面 Valter 发布的其他解决方案有效。不过谢谢!
    • 出于某种原因,我认为这是关于 colnames 的,抱歉。 :)
    猜你喜欢
    • 1970-01-01
    • 2020-10-14
    • 1970-01-01
    • 2021-12-01
    • 2019-06-27
    • 2018-09-16
    • 2017-01-17
    • 2020-02-18
    • 2013-05-03
    相关资源
    最近更新 更多