如何在R语言Plotly中插入图片至图例上方？

你尝试的layer参数仅对绘图区域内的元素生效，而图例属于Plotly的UI顶层组件，默认会覆盖所有通过layout(images)添加的图片。要实现图片在图例上方显示，需要改用**注释（annotations）**来插入图片——注释的渲染层级高于图例。

修改后的完整代码 #

library(plotly)

x_data <- c(1, 2, 3, 4, 5)
y_data <- c(2, 3, 4, 3, 4)
labels <- c("A", "B", "C", "D", "E")

p <- plot_ly()

for (i in 1:length(x_data)) {
    p <- add_trace(p, x = x_data[i], y = y_data[i], type = 'bar', name = labels[i], legendgroup = labels[i])
}

p <- p %>% layout(margin=list(r=100))

p <- p %>% layout(legend=list(tracegroupgap=50, bgcolor="lightgrey"))

x_pos <- 1.11
y_pos <- 0.9
gap <- 0.2

# 改用add_annotations添加图片
for (i in 1:length(x_data)) {
    if((i %% 2) == 0) {
        img_src <- "https://images.plot.ly/language-icons/api-home/r-logo.png?raw=true"
    } else {
        img_src <- "https://raw.githubusercontent.com/cldougl/plot_images/add_r_img/vox.png"
    }
    # 用HTML img标签作为注释内容
    img_html <- sprintf('<img src="%s" style="width:80px; height:80px;">', img_src)
    p <- add_annotations(
        p,
        x = x_pos,
        y = y_pos,
        xref = "paper",
        yref = "paper",
        text = img_html,
        showarrow = FALSE,
        xanchor = "left",
        yanchor = "top"
    )
    y_pos <- y_pos - gap
}

p

关键修改说明 #

1. 替换layout(images)为add_annotations：注释组件的渲染优先级高于图例，能自然覆盖在图例上方
2. 使用HTML<img>标签插入图片：通过text参数传入图片的HTML代码，替代原layout(images)的source参数
3. 调整定位参数：设置xanchor="left"和yanchor="top"保证图片位置与原代码逻辑一致
4. 隐藏箭头：设置showarrow=FALSE去除注释默认的箭头样式

运行修改后的代码，图片会正确显示在图例上方。

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