首先，加载recharts:
library(recharts)setGrid用于为直角坐标系图形设置绘图区网格 (但在其他类型的图中也可生效)。
setGrid函数族有两类：设置网格和调整控件位置。关键是四个参数: x, y, x2, y2. 点(x, y)是控件/绘图区的左上角，而点(x2, y2)则是其右下角。
每次调用recharts包的函数都会自动重算各控件尺寸，建议把setGrid函数族放置在链式调用栈的末尾。
所有函数名都有小驼峰法和小写连划线(Hadly Wickham推荐此法)两种形式。为了便于偷懒，还有缩写版（如dataZoom缩写成dz）。
setGrid(chart, x = 80, y = 60, x2 = 80, y2 = 60, width = NULL,
height = NULL, bgColor = NULL, borderColor = NULL, borderWidth = 1,
widget = c("pane", "timeline", "legend", "title", "dataZoom", "dataRange",
"toolbox", "roamController"), ...)
set_grid(chart, x = 80, y = 60, x2 = 80, y2 = 60, width = NULL,
height = NULL, bgColor = NULL, borderColor = NULL, borderWidth = 1,
widget = c("pane", "timeline", "legend", "title", "dataZoom", "dataRange",
"toolbox", "roamController"), ...)
relocTitle(chart, x = NULL, y = NULL, ...)
move_title(chart, x = NULL, y = NULL, ...)
relocLegend(chart, x = NULL, y = NULL, ...)
move_legend(chart, x = NULL, y = NULL, ...)
relocDataZoom(chart, x = NULL, y = NULL, ...)
move_datazoom(chart, x = NULL, y = NULL, ...)
move_dz(chart, x = NULL, y = NULL, ...)
relocDataRange(chart, x = NULL, y = NULL, ...)
move_datarange(chart, x = NULL, y = NULL, ...)
move_dr(chart, x = NULL, y = NULL, ...)
relocTimeline(chart, x = NULL, y = NULL, x2 = NULL, y2 = NULL, ...)
move_timeline(chart, x = NULL, y = NULL, x2 = NULL, y2 = NULL, ...)
move_tl(chart, x = NULL, y = NULL, x2 = NULL, y2 = NULL, ...)
relocToolbox(chart, x = NULL, y = NULL, ...)
move_toolbox(chart, x = NULL, y = NULL, ...)
move_tb(chart, x = NULL, y = NULL, ...)
relocRoam(chart, x = NULL, y = NULL, ...)
move_roam(chart, x = NULL, y = NULL, ...)
move_rc(chart, x = NULL, y = NULL, ...)| 参数 | 要求 |
|---|---|
chart |
|
x |
绘图区/控件左上角的x坐标，默认为80px. |
y |
绘图区/控件左上角的y坐标，默认为60px. |
x2 |
绘图区/控件右下角的x坐标，默认为80px. |
y2 |
绘图区/控件右下角的y坐标，默认为60px. |
width |
宽度，默认为NULL (自动配置). |
height |
高度，默认为NULL (自动配置). |
bgColor |
绘图区背景色，默认为透明(‘rgba(0,0,0,0)’). |
borderColor |
绘图区边框颜色，默认为’#ccc’. |
borderWidth |
绘图区边框宽度，默认为0px (不显示). |
widget |
要设置的控件名称，可以是c(‘pane’, ‘timeline’, ‘legend’, ‘title’, ‘dataZoom’, ‘dataRange’, ‘toolbox’, ‘roamController’).
|
… |
省略号 |
用airquality数据集生成Echarts对象g:
library(data.table)
aq1 <- melt(airquality, id=c('Month', 'Day'), measure=c('Temp', 'Wind'),
variable='Param')
g <- echartr(aq1, Day, value, Param, t=Month, type='curve') %>%
setToolbox(pos=3) %>% setTitle('Temp & Wind') %>% setDataZoom() %>%
setDataRange()
gsetGrid中的width和height与setTheme中的不同。setGrid只作用于绘图区。
g %>% setGrid(width=300, height=200)我们要把绘图区扩大一点。所以需要移动控件，然后用setGrid改变绘图区尺寸。
移动控件，最简单的办法是用set[Widgets]函数族的pos参数。
g1 <- g %>% setTitle(pos=12)
g1现在可以把时间轴和缩放漫游轴移到底部。由于缩放漫游只支持x和y，如果我们要把它放到底部，固定右下角的y2，怎么办呢？ Echarts对象的元数据中都有一个随机编码的elementId。我们可以用一个JavaScript表达式document.getElementById(<elementId>).offsetHeight动态获取画布高度。无论如何缩放画布窗口，控件都会保持正确的相对定位。
g2 <- g1
g2$elementId <- "chart2"
g2 <- g2 %>% relocDataZoom(x=120, y=JS(paste0(
"document.getElementById('", g2$elementId, "').offsetHeight-30")))
g2timeline支持x2和y2。所以我们可以直接设置y2为25。这样，我们交换了时间轴和缩放漫游的位置。
g3 <- g2 %>% relocTimeline(y2=25, x=120, x2=50)
g3$elementId <- "chart3"
g3最后，把绘图区增大。
g4 <- g3 %>% setGrid(x=120, y=40, x2=50, y2=90)
g4$elementId <- "chart4"
g4