如何在Shiny的Highchart树形图图例中仅显示大洲分类？

核心问题解决思路 #

1. 仅显示大洲图例：手动遍历层级数据，将大洲节点设为显示图例，国家节点设为隐藏图例
2. 修复点击图例颜色异常：通过自定义JS事件固定图例项颜色，同时确保点击图例时控制对应大洲的所有节点

修改后的完整代码 #

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

# 预定义大洲与对应颜色的映射
continent_colors <- c(
  Asia = 'pink',
  Europe = 'yellow',
  Africa = 'blue',
  Americas = 'green',
  Oceania = 'orange'
)

ui <- fluidPage(
  highchartOutput("hcontainer")
)

server <- function(input, output){
  output$hcontainer <- renderHighchart({  
    # 处理数据并构建层级结构
    hier_data <- gapminder %>%
      filter(year == 2007) %>% 
      data_to_hierarchical(
        group_vars = c(continent, country), 
        size_var = pop,
        colors = unname(continent_colors)
      )
    
    # 调整层级节点的图例显示与关联配置
    hier_data$series[[1]]$data <- lapply(hier_data$series[[1]]$data, function(node) {
      # 识别大洲节点（包含子节点的为大洲）
      if (!is.null(node$children)) {
        node$showInLegend <- TRUE
        node$legendType <- 'point'
        # 给大洲设置固定颜色
        node$color <- continent_colors[node$name]
        node$id <- node$name
        # 配置国家节点：隐藏图例，关联对应大洲
        node$children <- lapply(node$children, function(child) {
          child$showInLegend <- FALSE
          child$parent <- node$name
          child$color <- node$color # 国家色块继承大洲颜色，可根据需求调整
          child
        })
      } else {
        # 国家节点隐藏图例
        node$showInLegend <- FALSE
      }
      node
    })
    
    # 绘制树形图并自定义图例点击事件
    hchart(hier_data, type = "treemap") %>%
      hc_legend(
        itemClick = JS("function(e) {
          var chart = this.chart;
          var continent = e.name;
          // 切换该大洲下所有节点的可见性
          chart.series[0].data.forEach(function(point) {
            if (point.parent === continent || point.name === continent) {
              point.setVisible(!point.visible);
            }
          });
          // 强制保持图例项的原始颜色，修复颜色异常问题
          e.target.style.fill = this.color;
        }")
      )
  })
}

shinyApp(ui, server, options = list(launch.browser = TRUE))

关键修改说明 #

• 固定大洲颜色：通过预定义的continent_colors确保每个大洲的颜色唯一且固定，避免自动分配导致的颜色混乱
• 层级图例控制：遍历层级数据，仅让包含子节点的大洲节点显示在图例中，国家节点全部隐藏
• 自定义图例点击逻辑：通过JS代码实现点击图例时切换对应大洲所有节点的可见性，同时强制保持图例项的原始颜色，解决Highcharts原生的颜色异常问题

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