• R语言已解决
  • 如何在 plotly 绘制的网页动画中再添加一个暂停按钮

貌似 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 数据处理的部分,我稍稍改一下,去掉一点依赖

    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")

      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 了解一下的话,应该如何入手?比如像这次,就不知道要去调绘图区域

          Cloud2016

          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 了

            关于 plotly 动画,点击时间线上的日期可以停止播放,所以本问题算是有答案了,先标记已解决,期待更好的!