Quarto 文档中的交互式绘图无法使用 iframe 在 R Shiny 中渲染,如何在 R Shiny 应用程序中渲染 Quarto“.qmd”文件?

Paw*_*ali 5 html r-markdown shiny quarto

目标 我想在现有的一个 R Shiny 应用程序中渲染多个四开本文件 (.qmd)

当前的解决方案 我当前的解决方案是将 Quarto 文件渲染为 html 并在 R Shiny 应用程序中显示 html 文件,但这不适用于交互式绘图。我知道我可以在 Quarto 文档中使用闪亮,但我想使用 R Shiny 中的功能来渲染 quarto。

可重现的示例代码

应用程序R

library(shiny)
library(quarto)

ui <- fluidPage(titlePanel("Reproducable Example"),
                
                sidebarLayout(
                  sidebarPanel(
                    textInput(inputId = "user_argument", label = "Argument"),
                    br(),
                    actionButton("render_button", "Render Quarto ")
                  ),
                  mainPanel(uiOutput("quarto_output"))
                ))

server <- function(input, output) {
  observeEvent(input$render_button, {
    quarto::quarto_render("example.qmd",
                          execute_params = list(user_arg = input$user_argument))
    html <-  readLines("qmd_output.html")
    # Display html in output
    output$quarto_output <- renderUI({
      tags$iframe(srcdoc = html,
                  height = "500px",
                  width = "100%")
    })
  })
}

# Run the application
shinyApp(ui = ui, server = server)
Run Code Online (Sandbox Code Playgroud)

示例.qmd

---
title: "Quarto HTML Basics"
format:
  html:
    code-tools: true
    self-contained: true
    output-file: "qmd_output.html"
    theme: cosmo
execute:
  warning: false
params:
  user_arg: NA
---



```{r}
#| label: fig-temperatures
#| fig-cap: "New Haven Temperatures"

library(dygraphs)
dygraph(nhtemp) %>% 
  dyRangeSelector(dateWindow = c("1920-01-01", "1960-01-01"))
```

## Argument

My name is `r params$user_arg`.
Run Code Online (Sandbox Code Playgroud)

观察结果

  1. 当 quarto 渲染 html 时,交互式绘图正常工作,而当在 R Shiny 中渲染相同的 html 时,交互式绘图不起作用
  2. 我使用 iframe 是因为直接在 R Shiny 中插入 html 也会覆盖插入的 html 中的 css。

帮助

  1. 有没有其他方法可以在 R Shiny App 中渲染 Quarto 文件?
  2. 如果没有,是否有任何选项可以从 html 在 Shiny 中渲染交互式绘图?

mkr*_*anj 1

新答案

经过一番修改后,我让 iframe 可以工作,而且 CSS 也不会溢出。这就是我所做的:
首先,www在 app.R 所在的目录中创建一个文件夹。Web资源放在这个目录下就可以方便的使用。
接下来,移入example.qmdwww 文件夹。最后,将observeEvent更改为:

observeEvent(input$render_button, {
    quarto::quarto_render("www/example.qmd", #note the www/
                          execute_params = list(user_arg = input$user_argument)
                          )
    html <-  "qmd_output.html" # WITHOUT www! Because www/ is implicit in src calls
    # Display html in output
    output$quarto_output <- renderUI({
      
      tags$iframe(src = html,
                  height = "500px",
                  width = "100%")
    })
  })
Run Code Online (Sandbox Code Playgroud)

原回复

这不是一个完美的答案,但这将使您的四开本文档显示出来:

将observeEvent更改为:

observeEvent(input$render_button, {
    quarto::quarto_render("example.qmd",
                          execute_params = list(user_arg = input$user_argument))
    html <-  "qmd_output.html" #CHANGED you defined this name in example.qmd
    # Display html in output
    output$quarto_output <- renderUI({
      # I didn't get iframe to work, but using the next line will load the generated HTML
      includeHTML(html)
  })
Run Code Online (Sandbox Code Playgroud)