highcharter配置x轴crosshair tooltip悬浮时展示所有序列数据点

解决方案 #

你需要给图表添加hc_tooltip配置项，开启共享tooltip模式即可实现同一x轴坐标下所有序列数据集中展示的效果，修改后的完整代码如下：

library(highcharter)

highchart() %>%
  hc_chart(
    type = "container", zoomType = "x") %>%
  # 合并原代码中重复的两次hc_xAxis配置
  hc_xAxis(
    type = "datetime",
    tickLength = 0, 
    crosshair = TRUE
  ) %>%
  hc_yAxis(
    tickLength = 0, 
    crosshair = TRUE
  ) %>%
  # 核心配置：开启共享tooltip
  hc_tooltip(
    shared = TRUE,
    sort = TRUE, # 可选项：tooltip内序列按数值大小排序
    valueDecimals = 2 # 可选项：统一控制数值显示小数位数
  ) %>%
  hc_add_series(
    type = "line",
    name = "原始数据", # 可选项：自定义序列名称方便区分
    data = airmiles
  ) %>%
  hc_add_series(
    type = "line",
    name = "折半数据",
    data = airmiles/2
  )

配置说明 #

tooltip.shared是Highcharts自带的配置项，默认值为FALSE，即悬浮时仅显示当前命中的单个序列数据；设置为TRUE后，会自动检索同一x轴刻度下所有序列的对应数据点，聚合到同一个tooltip内展示，完全匹配你期望的效果。

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