在Shiny中呈现带有Sparklines的数据表格

Question

我希望在shiny DT中包含sparklines。在RStudio Viewer中它可以正常显示，但在Shiny中却无法渲染。以下是一个最小化的示例。

# dependencies
  require(sparkline)
  require(DT)
  require(shiny)

# create data with sparklines
  spark_data <- data.frame(
    id = c('spark1', 'spark2'),
    spark = c(
      spk_chr(values = 1:3, elementId = 'spark1'),
      spk_chr(values = 3:1, elementId = 'spark2')
    )
  )

# render in RStudio viewer (this works)
  tbl <- datatable(spark_data, escape = FALSE)
  spk_add_deps(tbl)

# render in Shiny (no sparklines rendered in DT)
  ui <- fluidPage(
      sparklineOutput("test_spark"),
      dataTableOutput("tbl")
  )

  server <- function(input, output) {
    # sparkline outside DT (works fine) - also ensures sparkline dependencies are attached
      output$test_spark <- renderSparkline(sparkline(1:3))

    # sparkline inside DT (does not render)
      output$tbl <- renderDataTable(
        expr = spark_data,
        escape = FALSE
      )
  }

  shinyApp(ui = ui, server = server)

- Grant

---

请参考此链接（https://leonawicz.github.io/HtmlWidgetExamples/ex_dt_sparkline.html）以在Shiny数据表中获取迷你图。 - SBista

谢谢，是的，我确实在那个页面上花了一些时间。它涵盖了我的第一个情况（即在RStudio Viewer中呈现），这对我来说没有问题。但该链接并未涵盖第二种情况（为什么无法在Shiny中呈现）。我怀疑问题可能出在依赖项上。我不清楚如何在闪亮应用程序中使用'spk_add_deps'，因此我通过在DT之外呈现虚拟火花线来获取附加的依赖项。 - Grant

我在这里重新发布了这个问题的一个版本https://dev59.com/R6bja4cB1Zd3GeqPfmVR，因为似乎解决方案不应该需要手动输入JavaScript。如果它在查看器中有效，为什么不在Shiny中有效呢？ - Brian Stamper

Answer 1

我修改了你的代码，以生成小型走势图。我参考了这个链接来生成小型走势图。

require(sparkline)
require(DT)
require(shiny)

# create data
spark_data1<- data.frame(id = c('spark1', 'spark2'),
                          spark = c("1,2,3", "3,2,1"))



ui <- fluidPage(
  sparklineOutput("test_spark"),
  DT::dataTableOutput("tbl")
)

server <- function(input, output) {

  line_string <- "type: 'line', lineColor: 'black', fillColor: '#ccc', highlightLineColor: 'orange', highlightSpotColor: 'orange'"

  cd <- list(list(targets = 1, render = JS("function(data, type, full){ return '<span class=sparkSamples>' + data + '</span>' }")))

  cb = JS(paste0("function (oSettings, json) {\n  $('.sparkSamples:not(:has(canvas))').sparkline('html', { ", 
                 line_string, " });\n}"), collapse = "")

  output$tbl <- DT::renderDataTable({
    dt <-  DT::datatable(as.data.frame(spark_data1),  rownames = FALSE, options = list(columnDefs = cd,fnDrawCallback = cb))
  })
}

shinyApp(ui = ui, server = server)

希望这能帮到你！

- SBista

---

这是一个非常有用的例子，即使5年后它仍然有效！我想知道是否可能分享一个显示箱线图的示例。谢谢。 - Angelo

Answer 2

这是一个比较老的问题，但基于这个问题中的信息，我认为解决方案就是你最初尝试的加上几行代码。在这里，我删除了演示在查看器中工作的部分，并仅添加了使火花线起作用所需的内容。

# dependencies
require(sparkline)
require(DT)
require(shiny)

# create data with sparklines
spark_data <- data.frame(
  id = c('spark1', 'spark2'),
  spark = c(
    spk_chr(values = 1:3, elementId = 'spark1'),
    spk_chr(values = 3:1, elementId = 'spark2')
  )
)

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

ui <- fluidPage(
  ###  and this <------------
  htmlwidgets::getDependency('sparkline'),
  dataTableOutput("tbl")
)

server <- function(input, output) {

  output$tbl <- renderDataTable(
    expr = spark_data,
    escape = FALSE,
    ###  and this <------------
    options = list(
      drawCallback =  cb
    )
  )
}

shinyApp(ui = ui, server = server)

- Brian Stamper

---

还在这里回答了我的问题 https://dev59.com/R6bja4cB1Zd3GeqPfmVR - Brian Stamper