Highcharts热力图窗口调整后悬停瓷砖漂移问题求助

问题场景 #

在Shiny应用里用highcharter绘制热力图并放入fillRow容器时，调整窗口大小后图表能自动适配新宽度，但悬停热力图瓷砖时，瓷砖会漂移到窗口调整前的位置。手动在控制台调用chart.redraw()或禁用mouseTracking可临时解决该问题，原始实现代码如下：

dat <- datasets::airquality

shiny::fillRow(
  flex = 1,
  # heatmap
  highcharter::highchart(elementId = 'heatmap_test') %>%
    highcharter::hc_add_series(dat, highcharter::hcaes(y = Month, x = Day, value = Temp),
                               type = 'heatmap')
)

解决方案 #

方案1：监听窗口resize事件自动触发redraw #

通过添加JavaScript代码监听窗口大小变化，自动调用热力图的redraw()方法，强制同步坐标缓存：

library(shiny)
library(highcharter)

ui <- fluidPage(
  fillRow(
    flex = 1,
    highchart(elementId = 'heatmap_test') %>%
      hc_add_series(dat, hcaes(y = Month, x = Day, value = Temp), type = 'heatmap')
  ),
  tags$script(HTML("
    $(window).on('resize', function() {
      // 找到目标图表实例
      const targetChart = Highcharts.charts.find(chart => 
        chart.options.chart.renderTo === 'heatmap_test'
      );
      if (targetChart) {
        targetChart.redraw();
      }
    });
  "))
)

server <- function(input, output) {}

shinyApp(ui, server)

方案2：配置图表容器resize事件 #

直接在highchart的配置中绑定containerResize事件，当容器尺寸变化时自动重绘：

dat <- datasets::airquality

shiny::fillRow(
  flex = 1,
  highcharter::highchart(elementId = 'heatmap_test') %>%
    hc_chart(
      events = list(
        containerResize = JS("function() {
          this.redraw();
        }")
      )
    ) %>%
    highcharter::hc_add_series(dat, highcharter::hcaes(y = Month, x = Day, value = Temp),
                               type = 'heatmap')
)

方案3：禁用mouseTracking（牺牲交互性） #

如果不需要悬停提示等交互功能，直接禁用mouseTracking可彻底避免漂移问题：

dat <- datasets::airquality

shiny::fillRow(
  flex = 1,
  highcharter::highchart(elementId = 'heatmap_test') %>%
    highcharter::hc_add_series(dat, highcharter::hcaes(y = Month, x = Day, value = Temp),
                               type = 'heatmap',
                               mouseTracking = FALSE)
)

问题原因 #

窗口resize后，图表的视觉尺寸已更新，但Highcharts内部缓存的热力图瓷砖坐标未同步，悬停时仍基于旧坐标计算位置。调用redraw()会强制重新计算所有元素的布局坐标，确保悬停位置与视觉位置一致。

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