基于 R Shiny "html template" 的应用程序中的 highcharter 集成
highcharter integration in R Shiny "html template"-based application
上下文
我想以 html template. The UI is thus built in pure HTML, and I'm using a bootstrap 4 free template 为起点，使用高级 UI 创建一个 R Shiny 仪表板。
问题
虽然使用 highcharter 及其闪亮集成功能可以很好地处理超级基本 HTML 文件（与上述教程相同），但一旦我使用 bootstrap 仪表板主题，图表就不会显示。
我尝试了什么
- 几个bootstrap模板：
可重现的例子
在这里共享可重现的示例很困难，因为您需要完整的 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 文件缺少 link，但到目前为止我一直无法找到并解决这个问题
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
基于这个简单的 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 中的库。虽然我不确定 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>
上下文
我想以 html template. The UI is thus built in pure HTML, and I'm using a bootstrap 4 free template 为起点，使用高级 UI 创建一个 R Shiny 仪表板。
问题 虽然使用 highcharter 及其闪亮集成功能可以很好地处理超级基本 HTML 文件（与上述教程相同），但一旦我使用 bootstrap 仪表板主题，图表就不会显示。
我尝试了什么
- 几个bootstrap模板：
可重现的例子
在这里共享可重现的示例很困难，因为您需要完整的 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 文件缺少 link，但到目前为止我一直无法找到并解决这个问题
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
基于这个简单的 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 中的库。虽然我不确定 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>