Highcharter：散点图自定义Tooltip与X轴偏移问题求助

问题1：散点图无法使用独立Tooltip #

原因：全局通过hc_tooltip(formatter)设置的Tooltip会覆盖所有系列的局部配置，导致散点图无法启用自定义Tooltip。

解决方法：在全局Tooltip的formatter函数中，通过this.series.type判断当前系列类型，分别为箱线图和散点图返回不同的Tooltip内容，实现分系列独立配置：

formatter = JS("function(){
  if (this.series.type === 'boxplot') {
    return ('<strong>' +
          'Continent : ' + this.series.name +
          '<br>Maximum : ' + this.series.data[0].high +
          '<br>Minimum : ' + this.series.data[0].low +
          '</strong>'
    )
  } else if (this.series.type === 'scatter') {
    return ('<strong>Continent: ' + this.point.continent + '</strong><br>Life Expectancy: ' + this.y)
  }
}")

问题2：散点图抖动后首末组X轴偏移 #

原因：分类轴（type="category"）的首组左侧、末组右侧没有额外空间，抖动算法只能向有空间的方向偏移，导致首组散点偏右、末组偏左。

解决方法：将X轴改为数值轴，手动绑定分类标签并调整轴范围，为首末组留出抖动空间：

1. 为每个分类分配数值索引，用于数值轴定位
2. 设置X轴min = -0.5、max = 分类数量-0.5，确保首末组两侧有抖动空间
3. 自定义刻度定位器，保证分类标签与数值轴位置对应

修改后的完整代码 #

library(highcharter)
library(dplyr)
library(gapminder)

ds <- gapminder %>%
  dplyr::filter(year == 2007) %>%
  dplyr::arrange(-pop) %>%
  # 为分类分配数值索引，用于数值轴定位
  mutate(continent_idx = match(continent, unique(continent)) - 1)

myboxplotData <- data_to_boxplot(
  ds,
  lifeExp,
  continent,
  group_var     = continent,
  add_outliers  = FALSE,
  fillColor     = c("red", "green","yellow", "pink","blue"),
  color        = "black",                        
)

# 提取分类名称，用于数值轴标签
continent_cats <- unique(ds$continent)

highchart()%>%
  hc_chart(
    events = list(
      load = JS("function () {
        Highcharts.each(this.series, function (series) {
          series.legendSymbol.attr({ fill: series.options.fillColor });
        });
      }")
    )
  ) %>%
  # 将X轴改为数值轴，预留抖动空间
  hc_xAxis(
    type = "numeric",
    categories = continent_cats,
    min = -0.5,
    max = length(continent_cats) - 0.5,
    title = list(text = "continent"),
    tickPositioner = JS("function(){
      return Array.from({length: this.categories.length}, (_, i) => i);
    }")
  ) %>%
  hc_add_series_list(myboxplotData) %>%
  hc_yAxis(title = list(text = "Life expectancy")) %>%
  hc_title(text= "Boxplot using highcharter") %>% 
  hc_legend(enabled= TRUE) %>%
  # 全局Tooltip区分系列类型
  hc_tooltip(formatter = JS("function(){
    if (this.series.type === 'boxplot') {
      return ('<strong>' +
            'Continent : ' + this.series.name +
            '<br>Maximum : ' + this.series.data[0].high +
            '<br>Minimum : ' + this.series.data[0].low +
            '</strong>'
      )
    } else if (this.series.type === 'scatter') {
      return ('<strong>Continent: ' + this.point.continent + '</strong><br>Life Expectancy: ' + this.y)
    }
  }")) %>%
  hc_add_series(
      data = ds,
      type = "scatter",
      # 使用数值索引作为X值，确保抖动均匀
      hcaes(x = continent_idx, y = lifeExp, group = continent, continent = continent)
  ) %>%
  hc_plotOptions(scatter = list(
    color = "grey",
    showInLegend = FALSE,
    marker = list(
      radius = 6,
      symbol = "circle",
      lineWidth = 2
    ),
    jitter = list(x = 0.05, y = 0)
  ))

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