recharts在shiny中的显示问题

2018/03/16

Categories: shiny Tags: R plot package recharts JS 可视化

在shiny中使用recharts时，出现不能正常显示的问题：ePlot生成的R对象在shiny中可以显示；但是其他画图函数如:eBar、eBmap、eCandle等生成的对象不能正常显示。比较两类对象的差异发现在参数dependencies的设置上存在差异，通过修改变量可以正常显示，应该是依赖的一个bug。后续再查源码…..

ePlot函数画图

Create rEcharts from an R object，直接使用ePlot函数画图可以正常显示

library(recharts)
# 定义数据部分
series = list(list(
  name = 'Sales',
  type = 'bar',
  data = c(5, 20, 36, 10, 10, 20)
))
# 定义坐标轴部分
ext = list(
  xAxis = list(list( 
    data = c('shirt','cardign','chiffon shirt','pants','heels','socks')
  )),
  yAxis = list(list())
)
# 绘制
e1 = ePlot(series, ext)
e1

eBar函数画图

Create an HTML bar charts widget using the ECharts(version:3.2.2) library，使用eBar函数画图Rmd生成HTML正常，但是在shiny中使用eBar不显示

dat=data.frame(x1 = c('shirt','cardign','chiffon shirt','pants','heels','socks'),
               Sales = c(5, 20, 36, 10, 10, 20))
e2 = eBar(dat, ~x1, ~Sales)
e2
# renderEChart({
#   e2
# })

比较e1、e2的区别

names(e1)
## [1] "x"             "width"         "height"        "sizingPolicy" 
## [5] "dependencies"  "elementId"     "preRenderHook" "jsHooks"
names(e2)
## [1] "x"             "width"         "height"        "sizingPolicy" 
## [5] "dependencies"  "elementId"     "preRenderHook" "jsHooks"
str(e1)
## List of 8
##  $ x            :List of 8
##   ..$ legend    :List of 5
##   .. ..$ show  : logi TRUE
##   .. ..$ orient: chr "horizontal"
##   .. ..$ x     : chr "center"
##   .. ..$ y     : chr "bottom"
##   .. ..$ data  :List of 1
##   .. .. ..$ : chr "Sales"
##   ..$ title     :List of 4
##   .. ..$ text   : chr ""
##   .. ..$ subtext: chr ""
##   .. ..$ x      : chr "center"
##   .. ..$ y      : chr "top"
##   ..$ calculable: logi TRUE
##   ..$ theme     : chr "default"
##   ..$ tooltip   :List of 3
##   .. ..$ show     : logi TRUE
##   .. ..$ trigger  : chr "item"
##   .. ..$ formatter: chr "{b}: {c}"
##   ..$ series    :List of 1
##   .. ..$ :List of 3
##   .. .. ..$ name: chr "Sales"
##   .. .. ..$ type: chr "bar"
##   .. .. ..$ data: num [1:6] 5 20 36 10 10 20
##   ..$ xAxis     :List of 1
##   .. ..$ :List of 1
##   .. .. ..$ data: chr [1:6] "shirt" "cardign" "chiffon shirt" "pants" ...
##   ..$ yAxis     :List of 1
##   .. ..$ : list()
##  $ width        : NULL
##  $ height       : NULL
##  $ sizingPolicy :List of 6
##   ..$ defaultWidth : NULL
##   ..$ defaultHeight: NULL
##   ..$ padding      : NULL
##   ..$ viewer       :List of 6
##   .. ..$ defaultWidth : NULL
##   .. ..$ defaultHeight: NULL
##   .. ..$ padding      : NULL
##   .. ..$ fill         : logi TRUE
##   .. ..$ suppress     : logi FALSE
##   .. ..$ paneHeight   : NULL
##   ..$ browser      :List of 5
##   .. ..$ defaultWidth : NULL
##   .. ..$ defaultHeight: NULL
##   .. ..$ padding      : NULL
##   .. ..$ fill         : logi FALSE
##   .. ..$ external     : logi FALSE
##   ..$ knitr        :List of 3
##   .. ..$ defaultWidth : NULL
##   .. ..$ defaultHeight: NULL
##   .. ..$ figure       : logi TRUE
##  $ dependencies : NULL
##  $ elementId    : NULL
##  $ preRenderHook:function (instance)  
##  $ jsHooks      : list()
##  - attr(*, "class")= chr [1:2] "echarts" "htmlwidget"
##  - attr(*, "package")= chr "recharts"
str(e2)
## List of 8
##  $ x            :List of 9
##   ..$ title     :List of 4
##   .. ..$ text   : chr ""
##   .. ..$ subtext: chr ""
##   .. ..$ x      : chr "center"
##   .. ..$ y      : chr "top"
##   ..$ calculable: logi TRUE
##   ..$ theme     : chr "default"
##   ..$ tooltip   :List of 2
##   .. ..$ show   : logi TRUE
##   .. ..$ trigger: chr "axis"
##   ..$ toolbox   :List of 5
##   .. ..$ show   : logi TRUE
##   .. ..$ x      : chr "right"
##   .. ..$ y      : chr "top"
##   .. ..$ orient : chr "horizontal"
##   .. ..$ feature:List of 6
##   .. .. ..$ mark       :List of 1
##   .. .. .. ..$ show: logi TRUE
##   .. .. ..$ dataZoom   :List of 1
##   .. .. .. ..$ show: logi FALSE
##   .. .. ..$ magicType  :List of 2
##   .. .. .. ..$ show: logi TRUE
##   .. .. .. ..$ type: chr [1:4] "line" "bar" "stack" "tiled"
##   .. .. ..$ restore    :List of 1
##   .. .. .. ..$ show: logi TRUE
##   .. .. ..$ dataView   :List of 1
##   .. .. .. ..$ show:List of 1
##   .. .. .. .. ..$ readOnly: logi FALSE
##   .. .. ..$ saveAsImage:List of 1
##   .. .. .. ..$ show: logi TRUE
##   ..$ legend    :List of 5
##   .. ..$ show  : logi TRUE
##   .. ..$ orient: chr "horizontal"
##   .. ..$ x     : chr "left"
##   .. ..$ y     : chr "top"
##   .. ..$ data  :List of 1
##   .. .. ..$ : chr "Sales"
##   ..$ xAxis     :List of 14
##   .. ..$ position    : chr "bottom"
##   .. ..$ name        : chr ""
##   .. ..$ nameLocation: chr "start"
##   .. ..$ scale       : logi TRUE
##   .. ..$ precision   : num 2
##   .. ..$ power       : num 2
##   .. ..$ axisLine    :List of 1
##   .. .. ..$ show: logi TRUE
##   .. ..$ axisTick    :List of 1
##   .. .. ..$ show: logi FALSE
##   .. ..$ axisLable   :List of 2
##   .. .. ..$ show     : logi TRUE
##   .. .. ..$ textStyle:List of 1
##   .. .. .. ..$ color: chr "black"
##   .. ..$ splitLine   :List of 1
##   .. .. ..$ show: logi TRUE
##   .. ..$ splitArea   :List of 1
##   .. .. ..$ show: logi FALSE
##   .. ..$ type        : chr "category"
##   .. ..$ data        : chr [1:6] "shirt" "cardign" "chiffon shirt" "pants" ...
##   .. ..$ boundaryGap : logi TRUE
##   ..$ yAxis     :List of 13
##   .. ..$ position    : chr "left"
##   .. ..$ name        : chr ""
##   .. ..$ nameLocation: chr "start"
##   .. ..$ scale       : logi TRUE
##   .. ..$ precision   : num 2
##   .. ..$ power       : num 2
##   .. ..$ axisLine    :List of 1
##   .. .. ..$ show: logi TRUE
##   .. ..$ axisTick    :List of 1
##   .. .. ..$ show: logi FALSE
##   .. ..$ axisLable   :List of 1
##   .. .. ..$ show: logi TRUE
##   .. ..$ splitLine   :List of 1
##   .. .. ..$ show: logi TRUE
##   .. ..$ splitArea   :List of 1
##   .. .. ..$ show: logi FALSE
##   .. ..$ type        : chr "value"
##   .. ..$ boundaryGap : num [1:2] 0 0
##   ..$ series    :List of 1
##   .. ..$ :List of 3
##   .. .. ..$ type: chr "bar"
##   .. .. ..$ name: chr "Sales"
##   .. .. ..$ data: num [1:6] 5 20 36 10 10 20
##  $ width        : NULL
##  $ height       : NULL
##  $ sizingPolicy :List of 6
##   ..$ defaultWidth : NULL
##   ..$ defaultHeight: NULL
##   ..$ padding      : NULL
##   ..$ viewer       :List of 6
##   .. ..$ defaultWidth : NULL
##   .. ..$ defaultHeight: NULL
##   .. ..$ padding      : NULL
##   .. ..$ fill         : logi TRUE
##   .. ..$ suppress     : logi FALSE
##   .. ..$ paneHeight   : NULL
##   ..$ browser      :List of 5
##   .. ..$ defaultWidth : NULL
##   .. ..$ defaultHeight: NULL
##   .. ..$ padding      : NULL
##   .. ..$ fill         : logi FALSE
##   .. ..$ external     : logi FALSE
##   ..$ knitr        :List of 3
##   .. ..$ defaultWidth : NULL
##   .. ..$ defaultHeight: NULL
##   .. ..$ figure       : logi TRUE
##  $ dependencies :List of 1
##   ..$ :List of 10
##   .. ..$ name      : chr "default"
##   .. ..$ version   : chr "0.0.4"
##   .. ..$ src       :List of 1
##   .. .. ..$ file: chr "/home/xuwy/R/x86_64-redhat-linux-gnu-library/3.6/recharts/htmlwidgets/themes"
##   .. ..$ meta      : NULL
##   .. ..$ script    : chr "default.js"
##   .. ..$ stylesheet: NULL
##   .. ..$ head      : NULL
##   .. ..$ attachment: NULL
##   .. ..$ package   : NULL
##   .. ..$ all_files : logi TRUE
##   .. ..- attr(*, "class")= chr "html_dependency"
##  $ elementId    : NULL
##  $ preRenderHook:function (instance)  
##  $ jsHooks      : list()
##  - attr(*, "class")= chr [1:3] "echarts" "htmlwidget" "eBar"
##  - attr(*, "package")= chr "recharts"

比较发现e1与e2结构基本相同的list，最大区别

e1$dependencies
## NULL
e2$dependencies
## [[1]]
## List of 10
##  $ name      : chr "default"
##  $ version   : chr "0.0.4"
##  $ src       :List of 1
##   ..$ file: chr "/home/xuwy/R/x86_64-redhat-linux-gnu-library/3.6/recharts/htmlwidgets/themes"
##  $ meta      : NULL
##  $ script    : chr "default.js"
##  $ stylesheet: NULL
##  $ head      : NULL
##  $ attachment: NULL
##  $ package   : NULL
##  $ all_files : logi TRUE
##  - attr(*, "class")= chr "html_dependency"

将e2$dependencies = NULL 就可以实现e2在shiny中的正常显示，目前应该是依赖指向的问题