widgetframe辅助R交互式展示

2018/02/20

Categories: R Tags: JS R Markdown blogdown

R的画图包千千万，其中有许多优秀的交互式画图、数据展示包，如leaflet; dygraphs; DT等。但是如果要线上使用这些结果常常存在JS加载冲突的问题，因为加载这些包同时要引入许多相关的JS库

其中一个解决方法就是把相关的R展示模块当作一个iframe来处理，具体操作已有包widgetframe，使用frameWidget将输出结果进行包装

widgetframe简介

使用pym.js来实现iframe的潜入，主要函数：

The goal of widgetframe is to be able to embed widgets inside iframes using NPR’s Pymjs library for responsive iframes. This package provides two functions frameableWidget, and frameWidget. The frameableWidget is used to add extra code to a htmlwidget which allows it to be rendered inside a responsive iframe. The frameWidget returns a htmlwidget which displays content of another htmlwidget inside a responsive iframe.

widgetframe在R中使用

library(DT)
library(widgetframe)
## 载入需要的程辑包：htmlwidgets
dt <-  datatable(
  head(iris, 20), 
  options = list(
    columnDefs = list(list(className = 'dt-center', targets = 5)),
    pageLength = 5, lengthMenu = c(5, 10, 15, 20)),
  fillContainer = T)

# htmlwidgets::saveWidget(frameableWidget(dt),'dt.html')

保存结果为独立的html文件，需要引入的js文件直接通过base64编码在html中，这种html文件相对较大

widgetframe在Rmd中使用

Rmd文件使用knitr生成html的过程默认删除中间产生的文件及目录，所以添加如下参数才能正常显示，否则提示目录不存在

# ---
# title: test-widgetframe
# author: gXcloud
# 
# output: 
#   html_document: 
#   keep_md: yes #不自动清空过程文件
# ---
# 
# ```{r example-leaflet, warning=FALSE}
# library(leaflet)
# library(widgetframe)
# l <- leaflet() %>% addTiles() %>% setView(0,0,2)
# frameWidget(l, height = '400')
# ```
not found

not found

widgetframe在blogdown中使用

在blogdown中使用widgetframe只需在对应的Rmd文件中进行如下示例操作，无需保存中间的过程文件

library(leaflet)
library(widgetframe)
l <- leaflet() %>% addProviderTiles(providers$CartoDB.DarkMatter) %>% setView(0,0,2)
frameWidget(l)
library(dygraphs)
ts <- dygraph(nhtemp, main = "New Haven Temperatures",
              height=250, width='95%')
## Registered S3 method overwritten by 'xts':
##   method     from
##   as.zoo.xts zoo
frameWidget(ts)
library(DT)
dt <-  datatable(
  head(iris, 20), 
  options = list(
     columnDefs = list(list(className = 'dt-center', targets = 5)),
     pageLength = 5, lengthMenu = c(5, 10, 15, 20)),
  fillContainer = T)

frameWidget(dt, height = 350, width = '95%')

注：目前还不支持shiny