如何在highcharter导出菜单中一次性移除所有已打开的数据表？

这是highcharter内置导出功能的默认特性，而非bug。每次图表重新渲染后，导出菜单里的「View data table」会生成独立的弹窗实例，这些弹窗之间没有关联，所以默认的「Hide data table」只能关闭当前触发的那一个。

下面提供两种可行的解决方案：

方案一：自定义导出按钮，关闭旧弹窗后再打开新数据表 #

通过自定义导出按钮的点击事件，先关闭所有已存在的Highcharts数据表格弹窗，再打开新的数据表。核心是用JavaScript遍历并移除所有弹窗元素：

library(highcharter)
library(tidyverse)
library(shiny)

ui <- fluidPage(
  selectInput("First", label = "First Variable", width = "100%",
              choices = colnames(iris)), 
  selectInput("Second", label = "Second", width = "100%",
              choices = colnames(iris)),
  highchartOutput("hchartcont")
)

server = function(input, output) {
  
  output$hchartcont <- renderHighchart({
    df <- iris %>% select(x = input$First, y = input$Second)
    
    hchart(df, "line", hcaes(x, y)) %>% 
      hc_exporting(
        enabled = TRUE,
        buttons = list(
          contextButton = list(
            menuItems = list(
              # 保留默认导出选项
              "downloadPNG",
              "downloadJPEG",
              "downloadPDF",
              "downloadSVG",
              "separator",
              # 自定义查看数据表按钮
              list(
                text = "View data table",
                onclick = JS("function() {
                  // 关闭所有已打开的数据表弹窗
                  const dataTables = document.querySelectorAll('.highcharts-data-table-wrapper');
                  dataTables.forEach(table => table.remove());
                  // 打开新的数据表
                  this.downloadDataTable();
                }")
              ),
              "separator",
              "printChart"
            )
          )
        )
      )
  })
  
}

shinyApp(ui = ui, server = server)

方案二：在图表更新时自动关闭所有弹窗 #

借助shinyjs包执行JavaScript代码，每次图表重新渲染前关闭所有已存在的数据表弹窗：

library(highcharter)
library(tidyverse)
library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(), # 初始化shinyjs
  selectInput("First", label = "First Variable", width = "100%",
              choices = colnames(iris)), 
  selectInput("Second", label = "Second", width = "100%",
              choices = colnames(iris)),
  highchartOutput("hchartcont")
)

server = function(input, output) {
  
  observeEvent(c(input$First, input$Second), {
    # 切换变量时关闭所有数据表弹窗
    runjs("const dataTables = document.querySelectorAll('.highcharts-data-table-wrapper');
          dataTables.forEach(table => table.remove());")
  })
  
  output$hchartcont <- renderHighchart({
    df <- iris %>% select(x = input$First, y = input$Second)
    hchart(df, "line", hcaes(x, y)) %>% 
      hc_exporting(enabled = TRUE)
  })
  
}

shinyApp(ui = ui, server = server)

原理说明 #

Highcharts的数据表弹窗会添加highcharts-data-table-wrapper类名，通过JavaScript选择所有该类的元素并移除，就能一次性关闭所有弹窗。方案一从导出按钮入手，确保每次打开新表前清理旧表；方案二则在数据源变更时自动清理，避免弹窗堆积。

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