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); 
});