如何用自定义图片替换Highcharter散点图的默认标记点？

现有如下数据与基础绘图代码：

dfr <- data.frame(
    x = c("Denmark", "Denmark", "South Korea", "South Korea", "Yemen", "Yemen"),
    sex = c("Man", "Woman", "Man", "Woman", "Man", "Woman"),
    y = c(181.4, 167.2, 174.9, 157.4, 159.9, 153.97), 
    image = c("https://i.imgur.com/vs0YaFR.png", "https://i.imgur.com/e9SbUdB.png", 
              "https://i.imgur.com/qRYQ5Sk.png", "https://i.imgur.com/e9SbUdB.png", 
              "https://i.imgur.com/XG13e1K.png", "https://i.imgur.com/e9SbUdB.png")
)

library(highcharter)
hchart(dfr, "scatter", hcaes(x = x, y = y, group = sex), showInLegend = T) 

需求：将散点图默认的圆点标记替换为自定义图片，实现类似下图的效果：

解决方案 #

通过配置Highcharts的marker参数，即可实现自定义图片标记，代码如下：

library(highcharter)

hchart(dfr, "scatter", hcaes(x = x, y = y, group = sex), showInLegend = TRUE) %>%
  hc_plotOptions(
    scatter = list(
      marker = list(
        # 动态调用数据中每个点的image字段作为标记图片
        symbol = JS("function() { return 'url(' + this.point.image + ')'; }"),
        # 自定义图片标记的显示尺寸
        width = 30,
        height = 30
      )
    )
  )

关键说明： #

• 用JS()嵌入JavaScript逻辑，自动匹配每个数据点对应的图片地址
• 通过width和height参数调整图片标记的大小，适配可视化需求
• 分组图例（基于sex字段）会自动保留，无需额外配置

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