Question

我正在构建一个基于HTML模板的Shiny应用程序，我想用图表来绘制图表。我正在努力将图表插入模板中。

以下代码可以正常使用：

library(shiny)
library(plotly)

shinyApp(

  ui <- fluidPage(plotlyOutput("plot1")),

  server <- function(input, output) {

    p <- plot_ly(mtcars, x = ~mpg, y = ~wt, type = 'scatter', mode = 'markers')

    output$plot1 <- renderPlotly({p})

  }
)

但是，当我将应用更改为使用模板时，我无法使用renderPlotly或renderUI来执行此操作。

<!doctype html>
<html lang="en">
<head>
  <script src="shared/jquery.js" type="text/javascript"></script>
  <script src="shared/shiny.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="shared/shiny.css"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="w3.css">
</head>

<body>

  <h1>HTML Template UI</h1>
  <div id="plot1" class="shiny-plot-output" style="width: 100%; height: 300px; border: 1px solid red"></div>
  <div id="plot2" class="shiny-html-output" style="width: 100%; height: 300px; border: 1px solid blue"></div>

</body>
</html>

app.R

library(shiny)
library(plotly)

shinyApp(

  ui <- htmlTemplate("template.html"),  

  server <- function(input, output) {

    p <- plot_ly(mtcars, x = ~mpg, y = ~wt)

    output$plot1 <- renderPlotly({p})

    output$plot2 <- renderUI(HTML(paste(htmltools::tagList(list(p)))))

  }
)

有没有办法在基于HTML模板的Shiny应用程序中使用plotly？

Answer 1

尝试使用此模板：

<!doctype html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <script type="application/shiny-singletons"></script>
  <script type="application/html-dependencies">json2[2014.02.04];jquery[1.12.4];shiny[1.0.5];htmlwidgets[1.0];plotly-binding[4.7.1.9000];bootstrap[3.3.7]</script>
  <script src="shared/json2-min.js"></script>
  <script src="shared/jquery.min.js"></script>
  <link href="shared/shiny.css" rel="stylesheet" />
  <script src="shared/shiny.min.js"></script>
  <script src="htmlwidgets-1.0/htmlwidgets.js"></script>
  <script src="plotly-binding-4.7.1.9000/plotly.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
  <script src="shared/bootstrap/js/bootstrap.min.js"></script>
  <script src="shared/bootstrap/shim/html5shiv.min.js"></script>
  <script src="shared/bootstrap/shim/respond.min.js"></script>
</head>

<body>

  <h1>HTML Template UI</h1>
  <div class="container-fluid">
  <div id="plot1" class="plotly html-widget html-widget-output" style="width: 100%; height: 300px; border: 1px solid red"></div>
  <div id="plot2" class="shiny-html-output" style="width: 100%; height: 300px; border: 1px solid blue"></div>
  </div>

</body>
</html>

Answer 2

有一种更优雅，更轻松的方法来实现这一目标。在RStudio article中对此进行了很好的描述。

要包括必要的HTML和JS依赖关系，请在htmlTemplate的标题中包含headContent()。如果需要Bootstrap组件（actionButtons，tabsetPanel），则还必须在标题中包含bootstrapLib()。确保这些命令在双大括号内，例如
{{ bootstrapLib() }}。

您还可以将代码生成输入和输出（如按图所示）放在大括号中，这将自动创建html组件并为您提供JavaScript依赖项。

这使template.html更加整洁。

template.html

<!doctype html>
<html lang="en">
<head>

  {{ headContent() }}

</head>
<body>
  <h1>HTML Template UI</h1>
  <div class="container-fluid">

    {{plotlyOutput("plot1") }}
    {{uiOutput("plot2") }}

  </div>
</body>
</html>

app.R

library(shiny)
library(plotly)

p <- plot_ly(mtcars, x = ~mpg, y = ~wt, type = 'scatter', mode = 'markers')

ui <- htmlTemplate("template.html")

server <- function(input, output) {
  output$plot1 <- renderPlotly({p})
  output$plot2 <- renderUI(HTML(paste(htmltools::tagList(list(p)))))
}

在基于HTML模板的Shiny App中使用Plotly失败

2 个答案: