语境
我想基于 html template 使用高级 UI 创建 R Shiny 仪表板.因此，UI 是用纯 HTML 构建的，我使用的是 bootstrap 4 free template作为起点。
问题
虽然使用 highcharter 及其 Shiny 集成功能可以很好地处理 super 基本的 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>
{{ 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>
对 JAVASCRIPT 的 INDEX.HTML 调用
评论第一行使 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)
session 信息
> 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
最佳答案
基于这个简单化 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-head 中的库。虽然我不确定 Shiny 是否适用于您的 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>
关于r - 基于 R Shiny "html template"的应用程序中的 highcharter 集成，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52703549/