貌似 echart4r 连基本的分组上色需求都不支持了,需要自己整,开发者说考虑不了那么多情况
https://github.com/JohnCoene/echarts4r/issues/247
开发者说可以用 e_visual_map 或者 e_data 实现,弄了半天没看明白怎么用的。不得不吐槽一下, echart4r 的函数使用方式和其它 R 包都不一样
如何在 plotly 绘制的网页动画中再添加一个暂停按钮
- 已编辑
先丢一个不是特别完美的解决方案吧。设定比较多,而且确实如果同时用颜色和时间轴的情况下会显得特别容易犯迷糊
library(purrr)
library(echarts4r)
library(plyr)
data("gapminder", package = "gapminder")
titles <- map(unique(gapminder$year), function(x){
list(
text = "Gapminder",
subtext = x,
left = "center"
)
})
gapminder$color <- mapvalues(
gapminder$continent,
from = unique(gapminder$continent),
to = c('#442288', '#6CA2EA', '#B5D33D', '#FED23F', '#EB7D5B')
)
gapminder %>%
group_by(year) %>%
e_charts(x = gdpPercap, timeline = TRUE) %>%
e_scatter(serie = lifeExp, size = pop, bind = country) %>%
e_add("itemStyle", color) %>%
e_y_axis(min = 20, max = 85) %>%
e_x_axis(type = "log", min = 100, max = 100000) %>%
e_timeline_serie(title = titles) %>%
e_tooltip() %>%
e_theme("default")
待我有空再来看看。
echarts4r 由于是继承的 Echarts 的设定(JSON 传递数据和设定)方式,需要多做几个熟练了后就会发现比较顺手了。但是还是因为参数的构造问题可能会造成很多陷阱。一边debug一边查看参数是否正确传递也比较耗时间。但一般都还是可以通过各种 trick 来解决。
- 已编辑
InfinityLoop 谢谢,我好像明白一点了,借助 Echarts 气泡散点图的示例 里面的 itemStyle 是控制散点的颜色, e_add 用来上色。我看了一些示例,好像都没有横纵坐标轴标签,这个要如何添加呢?
- 已编辑
InfinityLoop 数据处理的部分,我稍稍改一下,去掉一点依赖
library(purrr)
library(echarts4r)
data("gapminder", package = "gapminder")
titles <- map(unique(gapminder$year), function(x) {
list(
text = "Gapminder",
subtext = x,
left = "center"
)
})
# 添加一列颜色,各大洲和颜色的对应关系可自定义,调整 levels 或 labels 里面的顺序即可,也可不指定 levels ,调用其它调色板
gapminder <- gapminder %>%
transform(color = factor(continent,
levels = c("Asia", "Africa", "Americas", "Europe", "Oceania"),
labels = RColorBrewer::brewer.pal(n = 5, name = "Spectral")
))
gapminder %>%
group_by(year) %>%
e_charts(x = gdpPercap, timeline = TRUE) %>%
e_scatter(serie = lifeExp, size = pop, bind = country, symbol_size = 5) %>%
e_add("itemStyle", color) %>%
e_y_axis(min = 20, max = 85) %>%
e_x_axis(type = "log", min = 100, max = 100000) %>%
e_timeline_serie(title = titles) %>%
e_tooltip() %>%
e_theme("default")
加个 name 就好了。 https://echarts.apache.org/zh/option.html#xAxis.name
e_y_axis(min = 20, max = 85, name = "Life Exp") %>%
e_x_axis(type = "log", min = 100, max = 100000, name = "GDP / Cap") %>%
- 已编辑
InfinityLoop 嗯嗯,我调了其它轴的标签和位置,为了不与 y 轴重合,我把时间线的位置往下调了调,但是看起来出界了,这个怎么办,见下图?看了文档 https://echarts.apache.org/zh/option.html#timeline 但是没搞明白怎么做。
gapminder %>%
group_by(year) %>%
e_charts(x = gdpPercap, timeline = TRUE) %>%
e_scatter(serie = lifeExp, size = pop, bind = country,
symbol_size = 5, name = "") %>%
e_add("itemStyle", color) %>%
e_y_axis(min = 20, max = 85, nameGap = 30,
name = "Life Exp", nameLocation = 'center') %>%
e_x_axis(type = "log", min = 100, max = 100000,
nameGap = 30, name = "GDP / Cap", nameLocation = 'center') %>%
e_timeline_serie(title = titles) %>%
e_timeline_opts(bottom = -20) %>% # 控制时间线的位置
e_tooltip() %>%
e_theme("default")
Cloud2016 比起调节时间轴位置,调整绘图区域更合适一点。
https://echarts.apache.org/zh/option.html#grid.bottom
gapminder %>%
group_by(year) %>%
e_charts(x = gdpPercap, timeline = TRUE) %>%
e_scatter(serie = lifeExp, size = pop, bind = country,
symbol_size = 5, name = "") %>%
e_add("itemStyle", color) %>%
e_y_axis(min = 20, max = 85, nameGap = 30,
name = "Life Exp", nameLocation = 'center') %>%
e_x_axis(type = "log", min = 100, max = 100000,
nameGap = 30, name = "GDP / Cap", nameLocation = 'center') %>%
e_timeline_serie(title = titles) %>%
e_grid(bottom = 100) %>% # <- 这里
e_tooltip() %>%
e_theme("default")
InfinityLoop 多谢!我目前在前端这方面是个菜鸟,准备入 坑 Echarts 了解一下的话,应该如何入手?比如像这次,就不知道要去调绘图区域
InfinityLoop
现在这个动画还有两个待优化的点:1. 将年份作为水印背景,类似汉斯·罗琳那个动画 2. 缺少一个图例( Legend )各个国家是按大洲分组的,并且和现在的配色对应上。
我已经把这个动画添加到网页上了,方便大家取用。
https://bookdown.org/xiangyun/masr/sec-echarts4r-animation.html
1可以通过再添加一个时间标题系列,然后通过样式设计成背景即可。
library(purrr)
library(echarts4r)
data("gapminder", package = "gapminder")
titles <- map(unique(gapminder$year), function(x) {
list(
text = "Gapminder",
left = "center"
)
})
years <- map(unique(gapminder$year), function(x) {
list(
subtext = x,
left = "center",
top = "center",
z = 0,
subtextStyle = list(
fontSize = 100,
color = "rgb(170, 170, 170, 0.5)",
fontWeight = "bolder"
)
)
})
# 添加一列颜色,各大洲和颜色的对应关系可自定义,调整 levels 或 labels 里面的顺序即可,也可不指定 levels ,调用其它调色板
gapminder <- gapminder %>%
transform(
color = factor(
continent,
levels = c("Asia", "Africa", "Americas", "Europe", "Oceania"),
labels = RColorBrewer::brewer.pal(n = 5, name = "Spectral")
)
)
gapminder %>%
group_by(year) %>%
e_charts(x = gdpPercap, timeline = TRUE) %>%
e_scatter(
serie = lifeExp, size = pop, bind = country,
symbol_size = 5, name = ""
) %>%
e_add("itemStyle", color) %>%
e_y_axis(
min = 20, max = 85, nameGap = 30,
name = "Life Exp", nameLocation = "center"
) %>%
e_x_axis(
type = "log", min = 100, max = 100000,
nameGap = 30, name = "GDP / Cap", nameLocation = "center"
) %>%
e_timeline_serie(title = titles) %>%
e_timeline_serie(title = years, index = 2) %>%
e_timeline_opts(playInterval = 1000) %>%
e_grid(bottom = 100) %>%
e_tooltip()
2的话似乎是 echarts4r 本身设置有 bug,主要原因还是因为 group_by 被用在了 timeline 上了,legend 的数据没有正确提取成功所以是空的。这部分我试了半天没有办法完成这个设置。
一个可以替代的方法是,再添加一个独立的 scatter 数据系列,然后通过各种设置将它做成 legend 的样子(https://echarts.apache.org/zh/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE)。然后和1中的方法一样添加到每一帧中。可能需要挺多时间来做的这里我就不再深究了。
学习的话只要做上十几二十个图就熟练了。主要还是参考官方文档进行设置。
还有我一般查设置是否正确的时候会在这里:
https://github.com/JohnCoene/echarts4r/blob/master/inst/htmlwidgets/echarts4r.js#L62
加上一行
console.log(opts);
自己重新打包后绘图,
将所有 Echarts 设置项输出在console中,看看是否是哪里没设置对。
同时可以模仿官方例子在 R 中进行复现来练习
https://echarts.apache.org/examples/zh/index.html
顺便参考我的一个 trick:https://github.com/JohnCoene/echarts4r/issues/287#issuecomment-795350351
PS:感觉可以追加一个 e_debug()
函数来方便用户 debug 了
InfinityLoop 太赞了,谢谢,够我去学习一阵了
关于 plotly 动画,点击时间线上的日期可以停止播放,所以本问题算是有答案了,先标记已解决,期待更好的!