интеграция highcharter в приложение на основе «html template» R Shiny - PullRequest
Новая
       44

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

0 голосов
/ 08 октября 2018

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

ВЫПУСК Хотя использование highcharter и его блестящих функций интеграции прекрасно работает с суперосновными файлами 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

})

INTUITION Я думаю, что может быть конфликт где-то или отсутствующая ссылка на 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 Ответ

0 голосов
/ 09 октября 2018

Основываясь на этом упрощенном 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>
...