[英]Show a tooltip or popover in Shiny datatables for each cell?
有沒有辦法為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)
})
}
)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.