javascript - R shiny renderTable 改变单元格颜色

Question

我有一个表格，我想根据 X(=6) 种不同深浅的蓝色中的值 (0-100) 为每个单元格着色。该表显示在 TabPanel 中。

目前我正在使用 shinyjs 调用一个 javascript 函数来选择我的表并将 CSS 样式添加到 <td>标签，取决于取值范围。

问题是，在第一次加载表格时(点击 TabPanel)，没有颜色显示，只有在再次加载后才显示。

所以我要么在 R 中寻找解决方案(不需要额外的 Javascript)，要么寻找一种自动重新加载 Table/TabPanel 的方法。

library(shiny)

ui <- shinyUI(fluidPage(
    tableOutput("dataTable")
  ))

server <- shinyServer(function(input, output) {

  output$dataTable <- renderTable({
    data <- getDataFromSomeWhere();
    //Some operations on data
    data
    //I want to color every table cell, depening on value (f.e. 0-5 = white, 10-20 = light blue ...)
  }, rownames = TRUE, colnames = TRUE)

shinyApp(ui = ui, server = server) 

更新 最后我仍然使用 JavaScript 解决方案，但使用 Shiny 的特定 js 事件来获得预期的效果:

$(document).on("shiny:value", function(e) {
  if (e.name == "myComponent") {
    e.preventDefault();
    $('#myComponent').html(e.value);
    //color code etc.
}

Answer 1

您可以使用 tableHTML 创建表格并根据条件设置其样式。

library(shiny)
library(tableHTML)

更改 ui 以使用 tableHTML 的输出函数:

ui <- shinyUI(fluidPage(
  tableHTML_output("dataTable")
))

然后使用 render_tableHTML() 渲染其中生成的表格。

您可以使用函数 tableHTML() 创建纯 HTML 表格。然后，您可以使用 add_css_conditional_column() 创建条件(在本例中为 between)以更改背景颜色(注意:您也可以使用其他 css。我使用了 #f6f6f6 而不是示例中的 white，因为您不会在输出中看到差异)

server <- shinyServer(function(input, output) {

  getDataFromSomeWhere <- reactive({
    mtcars
  })

  output$dataTable <- render_tableHTML({
    data <- getDataFromSomeWhere();
    # //Some operations on data
    data %>% 
      tableHTML(rownames = TRUE) %>% 
      add_css_conditional_column(conditional = 'between',
                                 between = c(0, 5),
                                 css = list(c('background-color'),
                                            c('#f6f6f6')),
                                 columns = 1:ncol(data)) %>% 
      add_css_conditional_column(conditional = 'between',
                                 between = c(10, 20),
                                 css = list(c('background-color'),
                                            c('lightblue')),
                                 columns = 1:ncol(data))

  })

})

最后的结果是:

shinyApp(ui = ui, server = server) 

您可以在 vignettes 中找到有关如何使用 tableHTML 的更多详细信息.