基于R Shiny"html模板"的应用程序中的highcharter集成 [英] highcharter integration in R Shiny "html template"-based application
问题描述
上下文
我想基于 html模板使用高级UI创建R Shiny仪表板.因此，UI是用纯HTML内置的，我使用的是 bootstrap 4免费模板作为起点.
CONTEXT
I want to create a R Shiny dashboard using advanced UI, based on html template. The UI is thus built in pure HTML, and I'm using a bootstrap 4 free template as a starting point.
问题 虽然使用highcharter和它的Shiny集成功能可以与超基本HTML文件配合使用(与上述教程相同)，但是一旦使用引导仪表板主题，图表就不会显示.
ISSUE While using highcharter and its Shiny integration functions works fine with super basic HTML files (same as in the above tutorial), charts do not display once I use a bootstrap dashboard theme.
我尝试过的内容
- 多个引导程序模板:
- Several bootstrap templates:
- SB Admin 2
- Gentelella
可复制的示例
在这里共享一个可复制的示例很困难，因为您将需要完整的SB Admin 2文件夹才能使其正常工作.基本上这是行不通的:REPRODUCIBLE EXAMPLE
Sharing a reproducible example is difficult here as you would need the full SB Admin 2 folder to make it work. Basically this does not work:# insert the following in my HTML template (index.html) {{ highchartOutput("highcharter_plot") }}对应的可复制服务器部分:
Corresponding reproducible server part:
# 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文件的链接，但到目前为止，我一直无法找到并解决此问题
INTUITION I guess there might be a conflict somewhere, or a missing link to js files, but I've been so far unable to source and solve this problem
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
注释第一行可以使高级章程起作用(但是结果其他交互功能被破坏了……)
Commenting the first line makes highcharter work (but as a consequence other interactive features are broken...)
<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推荐答案
基于此简单化的
htmlTemplate，您可以查看使用{{ headContent() }}时加载了哪些库.Based on this simplistic
htmlTemplateyou can check out which libraries are loaded when using{{ headContent() }}.library(shiny) html= ' <head> {{ headContent() }} </head>' ui <- htmlTemplate(text_ = html) server <- function(input, output){} shinyApp(ui, server)这是生成的HTML头:
This is the resulting 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.
In your case you have to remove this line, since you load another version of jquery.
<script src="shared/jquery.min.js"></script>因此，如果没有
{{ headContent() }}，则需要在html头中包含这些库.虽然我不确定Shiny是否可以与您的jquery库一起使用.您将必须进行测试.So, without
{{ headContent() }}those are the libraries you need to include in the html-head. Although I am not sure if shiny will work with your jquery library. You will have to test that.<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 Shiny"html模板"的应用程序中的highcharter集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
- Several bootstrap templates:
