Plotly add_trace顺序异常问题咨询（Shiny R应用场景）

在Shiny开发中用Plotly做图表时，碰到个头疼的问题：先调用add_trace加scatter折线图，再加bar柱状图，显示就不正常；但反过来先加bar再加scatter就没问题。因为业务逻辑限制，不能调换这两个trace的添加顺序，得找个不用改顺序的解决办法。

可复现数据与代码 #

先贴出测试用的数据和代码：

library(plotly)

df <- read.table(text="
    Product        variable value
1 ProductA             DDD    24
2 ProductB             DDD    22
3 ProductB             DDD    35
5 ProductA Brandattention    29
6 ProductB Brandattention    27
7 ProductBe Brandattention    27", header = TRUE)

异常顺序代码（先scatter后bar）：

df %>% plot_ly()%>%
  add_trace(x = ~variable, y = ~value, type = 'scatter', mode = 'lines',line = list(color = 'red', width = 1))%>%
  add_trace(x = ~variable, y = ~value, type = 'bar', 
               color = ~Product, 
               colors = c("ProductA" = "yellow", 
                          "ProductB" = "blue"))

正常顺序代码（先bar后scatter）：

df %>% plot_ly()%>%
  add_trace(x = ~variable, y = ~value, type = 'bar', 
               color = ~Product, 
               colors = c("ProductA" = "yellow", 
                          "ProductB" = "blue"))%>%
  add_trace(x = ~variable, y = ~value, type = 'scatter', mode = 'lines',line = list(color = 'red', width = 1))

解决办法 #

办法1：给bar trace加layer='below'参数

直接在添加bar的时候指定layer='below'，强制让柱状图显示在折线图下面，不管添加顺序如何：

df %>% plot_ly()%>%
  add_trace(x = ~variable, y = ~value, type = 'scatter', mode = 'lines', line = list(color = 'red', width = 1))%>%
  add_trace(x = ~variable, y = ~value, type = 'bar', 
               color = ~Product, 
               colors = c("ProductA" = "yellow", "ProductB" = "blue"),
               layer = 'below')  # 关键参数

办法2：手动调换traces的顺序

如果没法修改add_trace的参数，也可以在创建完所有trace后，直接调整Plotly对象里的traces列表顺序，把scatter移到最后：

# 按原来的顺序创建图表
p <- df %>% plot_ly()%>%
  add_trace(x = ~variable, y = ~value, type = 'scatter', mode = 'lines',line = list(color = 'red', width = 1))%>%
  add_trace(x = ~variable, y = ~value, type = 'bar', 
               color = ~Product, 
               colors = c("ProductA" = "yellow", "ProductB" = "blue"))

# 调换traces的顺序，把scatter放到后面
p$x$data <- rev(p$x$data)

# 显示调整后的图表
p

办法3：给scatter trace加layer='above'参数

反过来，给折线图设置layer='above'，确保它始终显示在最上层：

df %>% plot_ly()%>%
  add_trace(x = ~variable, y = ~value, type = 'scatter', mode = 'lines', 
            line = list(color = 'red', width = 1),
            layer = 'above')%>%  # 关键参数
  add_trace(x = ~variable, y = ~value, type = 'bar', 
               color = ~Product, 
               colors = c("ProductA" = "yellow", "ProductB" = "blue"))

这三个办法都不用改动原来的trace添加顺序，完全适配业务逻辑要求。

内容的提问来源于stack exchange，提问作者yach