highcharter integration in R Shiny “html template”

2019-07-15 04:43发布

站内问答 / 移动开发
1230 1 5

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.

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.

WHAT I HAVE TRIED

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 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 CALLS TO 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>

PACKAGES LOADED IN GLOBAL.R

pkgs <- c(
  "dplyr",
  "ggplot2",
  "highcharter",
  "shiny", "shinyjs", "shinyWidgets"
) 
lapply(pkgs, library, character.only = TRUE)

SESSION INFO

> 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条回答
冷血范
2楼-- · 2019-07-15 05:25

Based on this simplistic htmlTemplate you 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)

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>

In your case you have to remove this line, since you load another version of jquery.

<script src="shared/jquery.min.js"></script>

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)