Интеграция highcharter в приложение на основе "html template" R Shiny

КОНТЕКСТ
Я хочу создать панель управления R Shiny с использованием расширенного пользовательского интерфейса на основе HTML-шаблона. Таким образом, пользовательский интерфейс построен на чистом HTML, и я использую бесплатный шаблон начальной загрузки 4 в качестве отправной точки.

ПРОБЛЕМА Хотя использование highcharter и его функций интеграции Shiny прекрасно работает с суперосновными файлами HTML (как в предыдущем уроке), диаграммы не отображаются, когда я использую тему панели начальной загрузки.

ЧТО Я ПОПРОБОВАЛ

Воспроизводимый пример
Разделить воспроизводимый пример здесь сложно, так как для его работы вам понадобится полная папка SB Admin 2. В основном это не работает:

 # insert the following in my HTML template (index.html)
 {{ highchartOutput("highcharter_plot") }}

Соответствующая воспроизводимая серверная часть:

# in server.R
output$highcharter_plot <- renderHighchart({
data(citytemp)

hc <- highchart() %>% 
  hc_xAxis(categories = citytemp$month) %>% 
  hc_add_series(name = "Tokyo", data = citytemp$tokyo) %>% 
  hc_add_series(name = "London", data = citytemp$london) %>% 
  hc_add_series(name = "Other city",
                data = (citytemp$tokyo + citytemp$london)/2)

hc

})

Я думаю, что где-то может быть конфликт или отсутствует ссылка на js-файлы, но я до сих пор не могу найти и решить эту проблему

INDEX.HTML HEAD

<head>

    {{ headContent() }}
    <!-- required R Shiny HTML template -->

    <script src="shinyjs/inject.js"></script>
    <!-- required to use shinyjs -->

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Title</title>

    <!-- Bootstrap Core CSS -->
    <link href="../vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Morris Charts CSS -->
    <link href="../vendor/morrisjs/morris.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

INDEX.HTML ПРИЗЫВАЕТ JAVASCRIPT

Комментирование первой строки заставляет работать хайчартер (но, как следствие, другие интерактивные функции не работают...)

    <script src="../vendor/jquery/jquery.min.js"></script>
    THE ABOVE LINE SEEMS TO BE IN CONFLICT WITH JQUERY USED BY HIGHCHARTER

    <!-- Bootstrap Core JavaScript -->
    <script src="../vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../vendor/metisMenu/metisMenu.min.js"></script>

    <!-- Morris Charts JavaScript -->
    <script src="../vendor/raphael/raphael.min.js"></script>
    <script src="../vendor/morrisjs/morris.min.js"></script>
    <script src="../data/morris-data.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

ПАКЕТЫ, ЗАГРУЖЕННЫЕ В GLOBAL.R

pkgs <- c(
  "dplyr",
  "ggplot2",
  "highcharter",
  "shiny", "shinyjs", "shinyWidgets"
) 
lapply(pkgs, library, character.only = TRUE)

ИНФОРМАЦИЯ О СЕССИИ

> sessionInfo()
R version 3.5.0 (2018-04-23)
Platform: x86_64-w64-mingw32/x64 (64-bit)
Running under: Windows >= 8 x64 (build 9200)

Matrix products: default

locale:
[1] LC_COLLATE=French_France.1252  LC_CTYPE=French_France.1252    LC_MONETARY=French_France.1252 LC_NUMERIC=C                   LC_TIME=French_France.1252  



attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shinyWidgets_0.4.3 shinyjs_1.0        plotly_4.8.0       leaflet_2.0.2      DT_0.4             dplyr_0.7.6        ggplot2_3.0.0      highcharter_0.5.0  shiny_1.1.0       

loaded via a namespace (and not attached):
 [1] zoo_1.8-4         tidyselect_0.2.4  purrr_0.2.5       lattice_0.20-35   colorspace_1.3-2  viridisLite_0.3.0 htmltools_0.3.6   yaml_2.2.0        rlang_0.2.2       later_0.7.5       pillar_1.3.0     
[12] withr_2.1.2       glue_1.3.0        TTR_0.23-4        bindrcpp_0.2.2    bindr_0.1.1       plyr_1.8.4        quantmod_0.4-13   stringr_1.3.1     munsell_0.5.0     gtable_0.2.0      htmlwidgets_1.3  
[23] evaluate_0.11     labeling_0.3      knitr_1.20        crosstalk_1.0.0   Cairo_1.5-9       httpuv_1.4.5      curl_3.2          broom_0.5.0       xts_0.11-1        Rcpp_0.12.19      xtable_1.8-3     
[34] promises_1.0.1    backports_1.1.2   scales_1.0.0      jsonlite_1.5      mime_0.6          digest_0.6.17     stringi_1.2.4     rlist_0.4.6.1     grid_3.5.0        rprojroot_1.3-2   tools_3.5.0      
[45] magrittr_1.5      lazyeval_0.2.1    tibble_1.4.2      crayon_1.3.4      tidyr_0.8.1       pkgconfig_2.0.2   data.table_1.11.8 lubridate_1.7.4   httr_1.3.1        assertthat_0.2.0  rmarkdown_1.10   
[56] rstudioapi_0.8    R6_2.3.0          igraph_1.2.2      nlme_3.1-137      compiler_3.5.0
Источник

1 ответ

Решение

На основании этого упрощенного htmlTemplate Вы можете проверить, какие библиотеки загружаются при использовании {{ headContent() }},

library(shiny)

html= '
<head>
{{ headContent() }}
</head>'

ui <- htmlTemplate(text_ = html)
server <- function(input, output){}

shinyApp(ui, server)

Вот итоговая Html-голова:

<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.1.0]</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>
</head>

В вашем случае вы должны удалить эту строку, так как вы загружаете другую версию jquery.

<script src="shared/jquery.min.js"></script>

Итак, без {{ headContent() }} это библиотеки, которые нужно включить в html-заголовок. Хотя я не уверен, будет ли блестящий работать с вашей библиотекой jquery. Вы должны будете проверить это.

  <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.1.0]</script>
  <script src="shared/json2-min.js"></script>
  <link href="shared/shiny.css" rel="stylesheet">
  <script src="shared/shiny.min.js"></script>
Источник
Другие вопросы по тегам