R Shiny 基于“html 模板”的应用程序中的 highcharter 集成答案

【问题标题】：highcharter integration in R Shiny "html template"-based applicationR Shiny 基于“html 模板”的应用程序中的 highcharter 集成
【发布时间】：2019-03-13 04:48:28
【问题描述】：

上下文
我想使用基于html template 的高级 UI 创建一个 R Shiny 仪表板。因此，UI 是用纯 HTML 构建的，我使用 bootstrap 4 free template 作为起点。

问题虽然使用 highcharter 及其 Shiny 集成功能可以很好地处理超级基本的 HTML 文件（与上述教程相同），但一旦我使用引导仪表板主题，图表就不会显示。

我已经尝试过什么

几个引导模板：
- SB Admin 2
- Gentelella

可重复的示例
在这里分享一个可重现的示例很困难，因为您需要完整的 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>

    {{ 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 的调用

注释第一行使 highcharter 工作（但结果其他交互功能被破坏...）

    <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

【问题讨论】：

你能包括你的html头吗？可能存在重复的依赖关系。
@SeGa ：确实，问题是由于依赖关系冲突造成的。我用 html 头、对 javascript 的调用（在 index.html 中）以及从 global.R 加载的库丰富了我的初始帖子。非常感谢您对此的看法！
Shiny 加载它的 jquery 版本，然后你加载另一个 jquery 库。他们显然是冲突的。您可以尝试自己加载所有依赖项，不使用 {{ headContent() }} 并省略闪亮的 jquery。
好的，我明白了。谢谢@世嘉。在这种情况下，我如何知道由 {{ headContent() }} 管理的“底层”依赖项，以便手动将它们插入到我的 index.html 中？

标签： r shiny r-highcharter html-templates

【解决方案1】：

基于这个简单的htmlTemplate，您可以检查在使用{{ headContent() }} 时加载了哪些库。

library(shiny)

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

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

shinyApp(ui, server)

这是生成的 Html-head:

<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-head 中的库。虽然我不确定闪亮是否可以与您的 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>

【讨论】：

非常感谢@SeGa，非常有帮助。我确实必须删除您指出的行（jquery v1.12.4）并将我对 jquery（v3.1.0）的“调用”定位在头部而不是正文部分的末尾。似乎 jquery 幸运地照顾了向后兼容性......