- 已编辑
何不试试 {echarts4r}
这里就有例子了:https://echarts4r.john-coene.com/articles/gallery.html#gapminder-1
如果觉得播放不流畅可以自己设置每年的播放时长或者平滑曲线参数就可以了。
何不试试 {echarts4r}
这里就有例子了:https://echarts4r.john-coene.com/articles/gallery.html#gapminder-1
如果觉得播放不流畅可以自己设置每年的播放时长或者平滑曲线参数就可以了。
突然发现是个已知问题,已经有人提过了 https://github.com/ropensci/plotly/issues/1207 但是没有解决
看了下,好像不能按 continent 分组上色,我把代码贴过来了,帮忙看下
library(purrr)
library(echarts4r)
data("gapminder", package = "gapminder")
titles <- map(unique(gapminder$year), function(x){
list(
text = "Gapminder",
subtext = x,
left = "center"
)
})
gapminder %>%
group_by(year) %>%
e_charts(x = gdpPercap, timeline = TRUE) %>%
e_scatter(serie = lifeExp, size = pop, bind = country) %>%
e_y_axis(min = 20, max = 85) %>%
e_x_axis(type = "log", min = 100, max = 100000) %>%
e_timeline_serie(title = titles) %>%
e_tooltip() %>%
e_timeline_opts(
show = TRUE,
orient = "vertical",
symbol = "none",
right = 0,
top = 20,
bottom = 20,
height = NULL,
width = 45,
inverse = TRUE,
playInterval = 1000,
autoPlay = FALSE,
controlStyle = list(
showNextBtn = FALSE,
showPrevBtn = FALSE
),
label = list(
fontSize = 8
)
) %>%
e_theme("default")
貌似 echart4r 连基本的分组上色需求都不支持了,需要自己整,开发者说考虑不了那么多情况
https://github.com/JohnCoene/echarts4r/issues/247
开发者说可以用 e_visual_map 或者 e_data 实现,弄了半天没看明白怎么用的。不得不吐槽一下, echart4r 的函数使用方式和其它 R 包都不一样
先丢一个不是特别完美的解决方案吧。设定比较多,而且确实如果同时用颜色和时间轴的情况下会显得特别容易犯迷糊
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 动画,点击时间线上的日期可以停止播放,所以本问题算是有答案了,先标记已解决,期待更好的!