为什么图标没有显示在 Shiny 应用程序的 DT::datatable 中？

编程问答 2022-05-27

问题描述

我在 Shiny 应用程序的 DT::datatable 列中显示带有迷你图的图标时遇到了一些问题，即使我已经转义了 HTML。

编辑：删除了第二个问题。

library(shiny)
library(dplyr)

ui <- fluidPage(

  htmlwidgets::getDependency('sparkline'),DT::dataTableOutput("table")

)

server <- function(input,output) {

    raw_data <- data.frame(date = 2000:2021,value = sample(100:500,22),icon = as.character(icon("arrow-up")))

  data <- raw_data %>%
    group_by(icon) %>%
    # Create the sparkline
    summarise("value" = sparkline::spk_chr(c(value),xvalues = date,tooltipformat = '{{x}}: {{y}}'))

  output$table <- DT::renderDataTable({

    cb <- htmlwidgets::JS('function(){debugger;HTMLWidgets.staticRender();}')

    DT::datatable(data = data,escape = FALSE,options = list(drawCallback = cb))
  })

}

shinyApp(ui,server)

解决方法

默认情况下，shiny::icon 函数：

  1. 生成图标对应的HTML代码；

  2. 生成一个包含font-awesome图标库的脚本标签。

当您执行 as.character(icon(...... 时，您只能获得 HTML 代码。 font-awesome 库未加载，这就是图标不显示的原因。

获取图标的最简单方法是使用 glyphicon 图标库，该库包含在 bootstrap 中，因此无需加载任何内容（因为 bootstrap strong> 加载到 Shiny 应用程序中）：

as.character(icon("arrow-up",lib = "glyphicon"))

如果你真的想要一个字体很棒的图标，有两种可能：

  • 包含带有 link 标签的 font-awesome 库；

  • 或者在应用的其他地方使用 icon 函数，不使用 as.character（如果您不想看到这个图标，可以使用 display:none CSS 属性隐藏它).

datatablesdtrrshinysparklines