Highcharter依赖轮图外部标签Tooltip格式不一致问题

问题描述 #

使用R语言的highcharter包构建依赖轮图可视化巴西区域与经济 bloc的出口关联时，连接线段的Tooltip格式符合预期，但选中外部节点标签时，Tooltip格式与连接部分不一致，需要实现两者格式统一。

示例数据 #

g_211a <- tibble(
  Ano = rep("2020", 40),
  Nome_Regiao = c(
    "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste", "Centro Oeste",
    "Nordeste", "Nordeste", "Nordeste", "Nordeste", "Nordeste", "Nordeste", "Nordeste", "Nordeste",
    "Norte", "Norte", "Norte", "Norte", "Norte", "Norte", "Norte", "Norte",
    "Sudeste", "Sudeste", "Sudeste", "Sudeste", "Sudeste", "Sudeste", "Sudeste", "Sudeste",
    "Sul", "Sul", "Sul", "Sul", "Sul", "Sul", "Sul", "Sul"
  ),
  Nome_Bloco = c(
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia",
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia",
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia",
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia",
    "América Central", "América do Norte", "América do Sul", "Europa", "Oceania", "Oriente Médio", "África", "Ásia"
  ),
  US_FOB = c(
    280, 1148, 971, 6188, 20.1, 1548, 1308, 17051,
    165, 3743, 1509, 3383, 49.0, 179, 362, 6712,
    43.4, 1109, 933, 4471, 26.7, 636, 337, 16642,
    1623, 18777, 12504, 17432, 528, 3512, 4130, 40856,
    822, 4732, 6727, 5822, 188, 2912, 1726, 17984
  ),
  peso = c(
    1215963, 2518346, 3425936, 15357213, 23305, 5376993, 4812262, 43083225,
    208721, 7951870, 1206296, 6961486, 38124, 775838, 1535158, 20753837,
    107386, 4114713, 953891, 19801871, 16271, 3510910, 727275, 176968392,
    3580532, 22133764, 9771731, 35172655, 480777, 16728713, 12210101, 207129913,
    1056835, 4403596, 5519469, 8332363, 282375, 4560093, 3215392, 41396083
  )
)

修改后的代码 #

library(highcharter)
library(tidyverse)
library(jsonlite)

generate_wheel_region <- function(data, measure, year_filter, region_filter) {
  measure_column <- ifelse(measure == "value", "US_FOB", "peso")
  
  # 计算每个节点的总出口量，用于节点Tooltip显示
  node_totals <- data %>%
    # 汇总区域总出口
    group_by(Nome_Regiao) %>%
    summarise(total = sum(.data[[measure_column]], na.rm = TRUE), .groups = "drop") %>%
    # 汇总经济bloc总出口
    bind_rows(
      data %>%
        group_by(Nome_Bloco) %>%
        summarise(total = sum(.data[[measure_column]], na.rm = TRUE), .groups = "drop") %>%
        rename(Nome_Regiao = Nome_Bloco)
    ) %>%
    deframe() # 转换为命名向量，方便JS调用
  
  connections <- data %>%
    transmute(from = Nome_Regiao, to = Nome_Bloco, weight = .data[[measure_column]])
  
  nodes <- unique(c(connections$from, connections$to)) |>
    lapply(function(x) {
      list(
        id = x,
        name = gsub("\\d+\\.\\s?", "", x)
      )
    })
  
  title_measure <- ifelse(measure == "value", "Valor Exportado (US$)", "Peso Exportado (Toneladas)")
  title_title <- "Relações de Exportação entre Regiões e Setores Econômicos"
  title_subtitle <- paste("Região:", paste(region_filter, collapse = ", "), " | Ano:", ifelse(year_filter == "Todos", "2011-2020", year_filter))
  
  # 统一度量标签和单位
  measure_label <- ifelse(measure == "value", "Valor Exportado", "Peso Exportado")
  measure_unit <- ifelse(measure == "value", "US$", "toneladas")
  
  # 自定义Tooltip格式化函数，区分连接和节点
  tooltip_formatter <- JS(paste0("function() {
    if (this.point.from && this.point.to) {
      // 连接线段的Tooltip
      return '<b>' + this.point.from + '</b> → <b>' + this.point.to + '</b> <br>' +
             '<b> ", measure_label, " </b> ", measure_unit, " ' + Highcharts.numberFormat(this.point.weight, 1, ',', '.') + ' mi';
    } else {
      // 节点的Tooltip
      var total = ", toJSON(node_totals), "[this.point.id];
      return '<b>' + this.point.name + '</b> <br>' +
             '<b> Total ", measure_label, " </b> ", measure_unit, " ' + Highcharts.numberFormat(total, 1, ',', '.') + ' mi';
    }
  }"))
  
  highchart() %>%
    hc_chart(type = "dependencywheel", backgroundColor = "white") %>%
    hc_title(text = title_title) %>%
    hc_subtitle(text = title_subtitle) %>%
    hc_add_series(
      data = connections,
      name = "Exportações",
      hcaes(from = from, to = to, weight = weight),
      type = "dependencywheel",
      nodes = nodes
    ) %>%
    hc_tooltip(useHTML = TRUE, formatter = tooltip_formatter) %>%
    hc_add_theme(hc_theme_smpl()) %>%
    hc_exporting(enabled = TRUE)
}

# 调用测试
generate_wheel_region(
  g_211a,
  "value",
  2020,
  c("Sul", "Nordeste")
)

关键修改说明 #

1. 节点总数据计算：提前汇总每个区域和经济bloc的总出口量，转为命名向量供Tooltip调用
2. 自定义Tooltip逻辑：通过JS函数判断hover对象类型，分别生成连接线段和节点的Tooltip内容，确保格式统一
3. 修复参数问题：修正原代码中引用不存在的Peso_Liquido列，改为数据实际存在的peso列
4. 格式统一：节点和连接的Tooltip使用相同的字体样式、单位显示规则

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