Не удается использовать Plotly в приложении Shiny на основе шаблона HTML

Я создаю приложение Shiny на основе шаблона HTML, и я хотел бы использовать его для диаграмм. Я не могу вставить диаграмму в шаблон.

Следующий код отлично работает:

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

  }
)

Есть ли способ использовать сюжетно в приложении Shiny на основе шаблона HTML?


r plotly r-plotly shiny shinyjs
person mattino    schedule 23.02.2018    source источник
comment
взгляните на это: shiny.rstudio.com/articles/html-ui.html < / а>   -  person MLavoie    schedule 23.02.2018
comment
@MLavoie Спасибо, я начал с этого примера, но проблема в том, что они там не используют сюжетно.   -  person mattino    schedule 23.02.2018

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте использовать этот шаблон:

<!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>

введите описание изображения здесь

person Marco Sandri    schedule 23.02.2018
comment
Спасибо за ответ. У меня еще нет этих зависимостей от вашего заголовка (html-виджеты и т. Д.), Поэтому он еще не работает на моей стороне, но выглядит очень многообещающим. Я устанавливаю его сейчас :-) Хотя было бы неплохо узнать также более родной способ встраивания plotly в шаблоны, то есть в какой-то объект с class = shiny-x-output. - person mattino; 23.02.2018
comment
@mattino Пожалуйста, не могли бы вы запустить свой первый R-код выше, щелкнуть правую кнопку в браузере, выбрать визуализировать исходный код (или что-то подобное) и опубликовать результат? Спасибо. - person Marco Sandri; 23.02.2018
comment
Полное тело html с разделами plot1 и plot2: imgur.com/a/qksgz - person mattino; 23.02.2018
comment
Наконец, я создал его на своей машине. Как вы намекнули, проблема заключалась в отсутствии ссылок в шаблоне HTML. Решение состоит в том, чтобы сначала сгенерировать страницу с fluidPage (), а затем скопировать ее заголовок в шаблон :-) - person mattino; 26.02.2018

arrow_upward
1
arrow_downward

Есть более элегантный и простой способ добиться этого. Это хорошо описано в статье RStudio.

Чтобы включить необходимые HTML и JS-зависимости, вы включаете headContent() в заголовок htmlTemplate. Если вам нужны компоненты Bootstrap (actionButtons, tabsetPanel), вы также должны включить bootstrapLib() в заголовок. Убедитесь, что эти команды заключены в двойные фигурные скобки, например
{{ bootstrapLib() }}.

Вы также можете поместить код для генерации входных и выходных данных (например, plotly) в такие фигурные скобки, которые автоматически создадут компоненты 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)))))
}
person SeGa    schedule 29.09.2018
comment
Спасибо SeGa, это звучит как очень хороший намек, особенно если у меня в шаблоне более 2000 строк. - person mattino; 03.10.2018