如何将bslib可展开迷你图示例从Plotly转为Highcharter（无Shiny滞后）

直接上可运行的完整代码，核心是用ResizeObserver监听图表容器的尺寸变化，通过Highcharts原生API动态修改图表配置，完全避开shiny::getCurrentOutputInfo()带来的滞后问题：

library(shiny)
library(bslib)
library(highcharter)
library(htmlwidgets)

ui <- page_fluid(
    value_box(
      title = "Test",
      value = "Test",
      showcase = highchartOutput("hcp"),
      showcase_layout = showcase_top_right(),
      full_screen = TRUE,
      theme = "success"
  )
)

server <- function(input, output) {
  
  df <- data.frame(dose=c("D0.5", "D1", "D2"),
                   len=c(4.2, 10, 29.5))
  
  output$hcp <- renderHighchart({
    # 初始化迷你图状态：隐藏坐标轴、关闭导出
    df %>% 
      hchart('line', hcaes(x = dose, y = len)) %>%
      hc_xAxis(visible = FALSE) %>% 
      hc_yAxis(visible = FALSE) %>%
      hc_exporting(enabled = FALSE) %>%
      # 添加JS监听逻辑
      onRender("function(el) {
        // 定义尺寸阈值，可根据实际需求调整
        const heightThreshold = 200;
        // 获取Highcharts实例
        const chart = Highcharts.charts.find(c => c.renderTo === el);
        
        // 创建ResizeObserver监听容器尺寸变化
        const ro = new ResizeObserver(() => {
          const isExpanded = el.offsetHeight > heightThreshold;
          // 动态更新图表配置
          chart.update({
            xAxis: { visible: isExpanded },
            yAxis: { visible: isExpanded },
            exporting: { enabled: isExpanded }
          }, false); // false表示不重绘，最后统一重绘
          chart.redraw();
        });
        
        ro.observe(el);
        
        // 页面卸载时销毁观察者，避免内存泄漏
        el.addEventListener('remove', () => ro.disconnect());
      }")
  })
}

shinyApp(ui, server)

关键细节说明 #

• 初始化状态：默认按迷你图配置，隐藏坐标轴和导出功能，符合卡片收起时的展示需求
• ResizeObserver：直接监听图表DOM元素的尺寸变化，响应速度远快于Shiny端的getCurrentOutputInfo()
• Highcharts API：用chart.update()批量修改配置，最后调用redraw()统一重绘，比每次重新渲染图表更高效
• 内存管理：添加了元素移除时的观察者销毁逻辑，避免潜在的内存泄漏

内容的提问来源于stack exchange，提问作者D.sen