在shinydashboard中从particle.js添加粒子答案

【问题标题】：Adding particles from particles.js in shinydashboard在shinydashboard中从particle.js添加粒子
【发布时间】：2019-04-24 17:52:22
【问题描述】：

我遇到了一些麻烦，包括particles.js 输出（shinydashboard 中的shinyparticles 提供的API。我正在与R 合作。

以下是适用于 shiny 的示例

library(shiny)
library(shinyparticles)
    ui <- fluidPage(
           particles(),
           headerPanel("This is a sample app")
          )
    server <- function(input, output, session){}

    shinyApp(ui, server)

这是shinydashboard 的一个似乎不起作用

library(shinydashboard)
library(shinyparticles)
shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(tags$body(div(particles()))),
    title = "Dashboard example",
    skin = "black"
  ),
  server = function(input, output) { }
)

当我查看页面源代码时，生成的 HTML 看起来是相同的，但粒子的 viz 没有出现。

【问题讨论】：

标签： r shiny shinydashboard particles.js

【解决方案1】：

粒子不会出现，因为它们低于dashboardBody（默认情况下：z-index: -10）。

如果您将粒子的z-index 设置为1，它们将是可见的，但是您添加到主体的任何元素都将位于粒子之下。

所以将元素z-index 设置为更大的数字。（在这个例子中我只使用盒子）

代码：

dashboardBody(
  tags$head(tags$style("
    .particles-full {
      z-index: 1;
    }
    .box {
      z-index: 2;
    }
  ")),
  particles(),
  box(
    h2("Header"),
    p("Paragraph")
  ),
  box(
    plotOutput("plot")
  )
)

输出：

【讨论】：