javascript - Shiny + JS : Conditional Formatting based on Pivot Values

Question

我正在使用 rpivotTable htmlwidget ，它包装了优秀的PivotTable.js图书馆。我想根据单元格的值有条件地格式化数据透视表。

为此，我尝试调整函数 here .这是一个带有 rpivotTable 的最小 Shiny 应用程序:

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

1. .pvtVal 表 td 单元格由 pivotTable.js 创建，因此您自己的 Javascript 在 pivotTable.js 之后运行是很重要的完成。不幸的是，这发生在 document.ready 或 window.load 事件之后。我使用了 Running jQuery after all other JS has executed 中的技术持续轮询页面并查看表格单元格是否出现。

完整的工作代码

应用.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);
});