在 Shiny 中嵌入 R 变量 HTML

Question

下面是三个文件来说明我的问题和我的程序的结构方式。我想要做的是使用 bootstrap 卡并在其中放置一个 R 变量（例如，某些计算的结果）。有没有办法在单独的文档中使用 HTML 来做到这一点？

例如，假设 myVariable <- 2^2 是在服务器文件中完成的，我希望对象 myVariable 中的计算结果位于我已表示“放置 R 变量”的卡内。

感谢您的意见或建议。

一个简单的ui.R文件

ui <- fluidPage(
navbarPage(
theme = bs_theme(bootswatch = "flatly"),
title = 'Methods',
tabPanel('One'),
),
mainPanel(
h1('Hello World'),  
includeHTML("foo.html")
)
)

一个基本的server.R文件

library(shiny)
library(bslib)
server <- function(input, output) {
}

foo.HTML

的内容

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">I want to put an R variable here</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Answer 1

由于卡片来自您的自定义 HTML，而不是来自 Shiny 或其他 Shiny 扩展包的标准卡片组件。我们可以使用 shinyjs 包将变量发送到 UI 和运行一些简单的 Javascript 来更新值。

library(shiny)
library(bslib)
library(shinyjs)
ui <- fluidPage(
    useShinyjs(),
    navbarPage(
        theme = bs_theme(bootswatch = "flatly"),
        title = 'Methods',
        tabPanel('One'),
    ),
    mainPanel(
        h1('Hello World'),  
        HTML(
            '
            <div class="card text-center">
              <div class="card-header">
                Featured
              </div>
              <div class="card-body">
                <h5 class="card-title">Special title treatment</h5>
                <p id="mycard" class="card-text">I want to put an R variable here</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
              <div class="card-footer text-muted">
                2 days ago
              </div>
            </div>
            '
        )
    )
)

library(shiny)
library(bslib)
server <- function(input, output) {
    observe({
        myVariable <- 2^2
        runjs(paste0('$("#mycard").text("', myVariable, '")'))
    })
}

shinyApp(ui, server)

我为卡片添加了一个 ID mycard 这样我就可以很容易地用 JS 选择。
为了方便复现，我把你的foo.html改成了HTML()标签，一样的，你可以继续用你的foo.html，不过记得在卡片上加id="mycard"
所以这里你没有告诉我们在什么情况下触发更新，所以我直接从服务器计算值并在开始时发送给UI更新。根据您的实际情况更改。

Answer 2

你可以使用renderUI，这样就不需要shinyjs:

library(shiny)
library(bslib)

mycard <- function(x){
  sprintf('
  <div class="card text-center">
    <div class="card-header">
      Featured
    </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">%s</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">
      2 days ago
    </div>
  </div>
  ', x)
}


ui <- fluidPage(
  navbarPage(
    theme = bs_theme(bootswatch = "flatly"),
    title = 'Methods',
    tabPanel('One'),
  ),
  mainPanel(
    h1('Hello World'),
    uiOutput("mycard")
  )
)

server <- function(input, output){
  
  output[["mycard"]] <- renderUI({
    HTML(mycard(2*2))
  })
  
}

shinyApp(ui, server)

在 Shiny 中嵌入 R 变量 HTML

Embed R Variable in Shiny HTML

r

shiny

bootstrap-4

一个简单的ui.R文件

一个基本的server.R文件

foo.HTML