Shiny + JS：基于透视值的条件格式化

Question

我使用rpivotTablehtmlwidget，它包装了优秀的PivotTable.js库。我想根据单元格的值有条件地格式化数据透视表。

为此，我试图修改here功能。下面是一个最小的闪亮应用与rpivotTable：

rm(list = ls()) 
library(shiny) 
library(shinydashboard) 
library(rpivotTable) 
library(dplyr) 

#========================================================== 
# simulate some data for the pivot table 
#========================================================== 
df_pivot = data_frame(
    factor1 = sample(rep(LETTERS[1:2], 100)), 
    factor2 = sample(rep(LETTERS[5:6], 100)), 
    factor3 = sample(rep(LETTERS[19:20], 100)), 
    value = abs(rnorm(200)) 
) 

#========================================================== 
# ui 
#========================================================== 
pivot_body = dashboardBody({ 
    tags$head(includeScript("pivot.js")) 
    tags$head(
    tags$style(
     HTML(
     ".realGone { background-color: #F08080 !important; }" 
    ) 
    ) 
) 
    rpivotTableOutput(outputId = "pivot_output") 
}) 

pivot_header = dashboardHeader(title = "Some title.") 
pivot_sidebar = dashboardSidebar() 

pivot_ui = dashboardPage(
    header = pivot_header, 
    sidebar = pivot_sidebar, 
    body = pivot_body 
) 

#========================================================== 
# server 
#========================================================== 
pivot_server = shinyServer(function(input, output, session) { 
    output$pivot_output = renderRpivotTable({ 
    rpivotTable(
     data = df_pivot, 
     rows = "factor1", 
     cols = "factor2" 
    ) 
    }) 
}) 

#========================================================== 
# run the app 
#========================================================== 
pivot_app = shinyApp(
    ui = pivot_ui, 
    server = pivot_server 
) 

runApp(pivot_app) 

这里是我的JS功能的适应性 - 基本思想是寻找与类.pvtVal元素，添加一个类，对他们CSS样式基于应用在这个班上。

$(document).ready(function(){ 
var $labels = $('.pvtVal'); 
console.log("Reached here."); 
    for (var i=0; i<$labels.length; i++) { 
    if ($labels[i].innerHTML < 12) { 
      $('.pvtVal').eq(i).addClass('expired'); 
     } else if ($labels[i].innerHTML > 12 && $labels[i].innerHTML < 14) { 
      $('.pvtVal').eq(i).addClass('dead'); 
     } else if ($labels[i].innerHTML > 14) { 
     $('.pvtVal').eq(i).addClass('realGone'); 
     } 
    } 
}); 

但是，当我检查在控制台中的元素，它们不会出现有realGone类添加。我的猜测是我误解了$document().ready的功能。

Answer 1

您的代码有几个问题。

1. dashboardBody应该是一个具有多个参数而不是代码列表的函数。

正确：dashboardBody(item1, item2, item3)

错误：dashboardBody({line1, line2, line3})

的.pvtVal台TD手机是由pivotTable.js创建的，所以它是你自己的JavaScript pivotTable.js后运行至关重要完成。不幸的是，这发生在document.ready或window.load事件之后。我使用了Running jQuery after all other JS has executed中的技术来持续轮询页面并查看表格单元格是否出现。

完整的工作代码

app.R

rm(list = ls()) 
library(shiny) 
library(shinydashboard) 
library(rpivotTable) 
library(dplyr) 

#========================================================== 
# simulate some data for the pivot table 
#========================================================== 
df_pivot = data_frame(
    factor1 = sample(rep(LETTERS[1:2], 100)), 
    factor2 = sample(rep(LETTERS[5:6], 100)), 
    factor3 = sample(rep(LETTERS[19:20], 100)), 
    value = abs(rnorm(200)) 
) 

#========================================================== 
# ui 
#========================================================== 
pivot_body = dashboardBody(
    tags$head(
     tags$style(
      HTML(
       ".realGone { background-color: #F08080 !important; }" 
      ) 
     ) 
    ), 
    rpivotTableOutput(outputId = "pivot_output"), 
    tags$script(src="pivot.js") 

) 

pivot_header = dashboardHeader(title = "Some title.") 
pivot_sidebar = dashboardSidebar() 

pivot_ui = dashboardPage(
    header = pivot_header, 
    sidebar = pivot_sidebar, 
    body = pivot_body 
) 

#========================================================== 
# server 
#========================================================== 
pivot_server = shinyServer(function(input, output, session) { 
    output$pivot_output = renderRpivotTable({ 
     rpivotTable(
      data = df_pivot, 
      rows = "factor1", 
      cols = "factor2" 
     ) 
    }) 
}) 

#========================================================== 
# run the app 
#========================================================== 

shinyApp(ui = pivot_ui, server = pivot_server) 

pivot.js（确保把这个在www文件夹，它是项目的根的子文件夹）

$(window).load(function(){ 
    var i = setInterval(function() { 
     if ($(".pvtVal").length) { 
      clearInterval(i); 

      $(".pvtVal").each(function(index) { 

       var value = parseInt($(this).text()); 

       if (value < 12) { 
        $(this).addClass("expired"); 
       } else if (value > 12 && value < 14) { 
        $(this).addClass("dead"); 
       } else { 
        $(this).addClass("realGone"); 
       } 
      }); 
     } 
    }, 100); 
});