如何修改R语言Highcharter桑基图的节点提示框

问题描述 #

这是此前修改R highcharter桑基图链接提示框问题的后续，现在需要修改节点的提示框（当前显示undefined），理想效果是显示该节点所有链接的流量总和，同时保留链接的格式化提示框。

现有代码情况 #

标准桑基图代码 #

library(purrr) 
library(tidyverse)
library(highcharter)

# 数据
df <- tibble(from = c("Brazil", "Brazil", "Poland", "Spain", "Poland"),
             toto = c("Portugal", "Spain", "Portugal", "Brazil", "Poland"),
             exports = c(5324523.4523, 232452345.234, 2345234.52345, 3234523.45234, 63452345.2345),
             head = "Exports")

# 标准桑基图
highchart() %>%
  hc_add_series(
    type = "sankey",
    data = df |> pmap(~ list(from = ..1, to = paste0(..2, ' '), weight = ..3, head = ..4))
  )

仅链接提示框生效的代码 #

该代码能正常格式化链接的提示框，但节点提示框仍显示undefined：

# 格式化提示框（仅链接生效）
highchart() %>%
  hc_add_series(
    type = "sankey",
    data = df |> pmap(~ list(from = ..1, to = paste0(..2, ' '), weight = ..3, head = ..4))
  ) %>%
  hc_tooltip(formatter = JS("function () { return this.point.head + ': ' +'<b>' +
                             this.point.from + ' to ' +
                             this.point.to + '</b><br /> ' +
                             Highcharts.numberFormat(this.point.weight)
                            }")
  )

尝试过的无效代码 #

仅能修改节点提示框的纯文本内容，无法同时保留链接的格式化提示框：

highchart() %>%
  hc_add_series(
    type = "sankey",
    data = df |> pmap(~ list(from = ..1, to = paste0(..2, ' '), weight = ..3, head = ..4, sum = ..5))
  ) %>%
  hc_tooltip(
    nodeFormatter =  JS("function() {
    return 'only text works'
  }")
    # 注释掉后无法保留链接提示框
    # ,
    # formatter = JS("function () { return this.point.head + ': ' +'<b>' +
    #                          this.point.from + ' to ' +
    #                          this.point.to + '</b><br /> ' +
    #                          Highcharts.numberFormat(this.point.weight)
    #                         }"
    # )
  )  

解决方案 #

通过同时配置formatter（处理链接提示框）和nodeFormatter（处理节点提示框），并在nodeFormatter中通过Highcharts API计算节点总流量，实现需求：

library(purrr) 
library(tidyverse)
library(highcharter)

# 数据
df <- tibble(from = c("Brazil", "Brazil", "Poland", "Spain", "Poland"),
             toto = c("Portugal", "Spain", "Portugal", "Brazil", "Poland"),
             exports = c(5324523.4523, 232452345.234, 2345234.52345, 3234523.45234, 63452345.2345),
             head = "Exports")

# 带完整提示框的桑基图
highchart() %>%
  hc_add_series(
    type = "sankey",
    data = df |> pmap(~ list(from = ..1, to = paste0(..2, ' '), weight = ..3, head = ..4))
  ) %>%
  hc_tooltip(
    # 处理链接的提示框，保留原有格式化逻辑
    formatter = JS("function() {
      return this.point.head + ': ' + '<b>' +
             this.point.from + ' to ' + this.point.to + '</b><br />' +
             '流量: ' + Highcharts.numberFormat(this.point.weight);
    }"),
    # 处理节点的提示框，计算并显示总流量
    nodeFormatter = JS("function() {
      let totalFlow = 0;
      // 累加所有流出链接的流量
      if (this.point.linksFrom) {
        this.point.linksFrom.forEach(link => {
          totalFlow += link.weight;
        });
      }
      // 累加所有流入链接的流量
      if (this.point.linksTo) {
        this.point.linksTo.forEach(link => {
          totalFlow += link.weight;
        });
      }
      return '<b>' + this.point.name + '</b><br />' +
             '总流量: ' + Highcharts.numberFormat(totalFlow);
    }")
  )

关键说明 #

• formatter函数：继续负责链接的提示框格式化，保留原有的head、from、to和格式化后的权重显示
• nodeFormatter函数：通过this.point.linksFrom和this.point.linksTo获取节点的所有流出/流入链接，遍历累加权重得到总流量，再格式化显示节点名称和总流量

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