使用Highcharter复现Highcharts语言树图失败，请求排查解决

我尝试用R的Highcharter包复现Highcharts的系统发育语言树图表，步骤如下：

• 检查发现Highcharter未包含modules/treegraph.js模块，手动下载该文件后放入R\win-library\4.0\highcharter\htmlwidgets\lib\highcharts\modules目录
• 将官方示例的JS代码转换为R代码，运行后生成空白图

错误分析 #

1. 根节点数据顺序颠倒：根据keys = c('id', 'parent', 'link.type')的定义，数据列表的第一个元素是节点ID，第二个是父节点ID。原代码中根节点写成list(NA, 'Proto Indo-European')，把父节点和ID搞反了，导致整个树结构无法识别。
2. 未显式加载treegraph模块：手动放置模块文件后，Highcharter不会自动加载该模块，需要显式声明依赖。
3. 属性名大小写错误：Highcharts采用驼峰命名，原代码中fillcolor应为fillColor，会导致节点样式失效。
4. Levels配置缺失层级：原示例包含level 5的配置，代码中跳过该层级，可能导致部分节点样式异常。
5. 拼写错误：Portugese应为Portuguese，虽不影响渲染但属于细节问题。

修正后的代码 #

library(highcharter)
library(tidyverse)

# 显式加载treegraph模块
highchart() %>% 
  hc_add_dependency(name = "treegraph", version = "latest") -> hc_base

series = list(
  list(
    type = "treegraph",
    keys = c('id', 'parent', 'link.type'),
    clip = FALSE,
    data = list(
      # 修正根节点顺序：id在前，parent为NA
      list('Proto Indo-European', NA),
      list('Balto-Slavic', 'Proto Indo-European'),
      list('Germanic', 'Proto Indo-European'),
      list('Celtic', 'Proto Indo-European'),
      list('Italic', 'Proto Indo-European'),
      list('Hellenic', 'Proto Indo-European'),
      list('Anatolian', 'Proto Indo-European'),
      list('Indo-Iranian', 'Proto Indo-European'),
      list('Tocharian', 'Proto Indo-European'),
      list('Dardic', 'Indo-Iranian'),
      list('Indic', 'Indo-Iranian'),
      list('Iranian', 'Indo-Iranian'),
      list('Old Persian', 'Iranian'),
      list('Middle Persian', 'Old Persian'),
      list('Sanskrit', 'Indic'),
      list('Osco-Umbrian', 'Italic'),
      list('Latino-Faliscan', 'Italic'),
      list('Latin', 'Latino-Faliscan'),
      list('Brythonic', 'Celtic'),
      list('Goidelic', 'Celtic'),
      list('North Germanic', 'Germanic'),
      list('West Germanic', 'Germanic'),
      list('East Germanic', 'Germanic'),
      list('Old Norse', 'North Germanic'),
      list('Old Swedish', 'North Germanic'),
      list('Old Danish', 'North Germanic'),
      list('Old English', 'West Germanic'),
      list('Old Frisian', 'West Germanic'),
      list('Old Dutch', 'West Germanic'),
      list('Old Low German', 'West Germanic'),
      list('Old High German', 'West Germanic'),
      list('Old Icelandic', 'Old Norse'),
      list('Old Norwegian', 'Old Norse'),
      list('Middle Swedish', 'Old Swedish'),
      list('Middle Danish', 'Old Danish'),
      list('Middle English', 'Old English'),
      list('Middle Dutch', 'Old Dutch'),
      list('Middle Low German', 'Old Low German'),
      list('Middle High German', 'Old High German'),
      list('Baltic', 'Balto-Slavic'),
      list('Slavic', 'Balto-Slavic'),
      list('East Slavic', 'Slavic'),
      list('West Slavic', 'Slavic'),
      list('South Slavic', 'Slavic'),
      list('Phrygian', 'Proto Indo-European', 6),
      list('Armenian', 'Proto Indo-European', 6),
      list('Albanian', 'Proto Indo-European', 6),
      list('Thracian', 'Proto Indo-European', 6),
      list('Tocharian A', 'Tocharian', 6),
      list('Tocharian B', 'Tocharian', 6),
      list('Hittite', 'Anatolian', 6),
      list('Palaic', 'Anatolian', 6),
      list('Luwic', 'Anatolian', 6),
      list('Lydian', 'Anatolian', 6),
      list('Balochi', 'Iranian', 6),
      list('Kurdish', 'Iranian', 6),
      list('Pashto', 'Iranian', 6),
      list('Sogdian', 'Iranian', 6),
      list('Pahlavi', 'Old Persian', 6),
      list('Persian', 'Middle Persian', 6),
      list('Greek', 'Hellenic', 6),
      list('Dard', 'Dardic', 6),
      list('Sindhi', 'Sanskrit', 6),
      list('Romani', 'Sanskrit', 6),
      list('Urdu', 'Sanskrit', 6),
      list('Hindi', 'Sanskrit', 6),
      list('Bihari', 'Sanskrit', 6),
      list('Assamese', 'Sanskrit', 6),
      list('Bengali', 'Sanskrit', 6),
      list('Marathi', 'Sanskrit', 6),
      list('Gujarati', 'Sanskrit', 6),
      list('Punjabi', 'Sanskrit', 6),
      list('Sinhalese', 'Sanskrit', 6),
      list('Umbrian', 'Osco-Umbrian', 6),
      list('Oscan', 'Osco-Umbrian', 6),
      list('Faliscan', 'Latino-Faliscan', 6),
      # 修正拼写错误
      list('Portuguese', 'Latin', 6),
      list('Spanish', 'Latin', 6),
      list('French', 'Latin', 6),
      list('Romanian', 'Latin', 6),
      list('Italian', 'Latin', 6),
      list('Catalan', 'Latin', 6),
      list('Franco-Provençal', 'Latin', 6),
      list('Rhaeto-Romance', 'Latin', 6),
      list('Welsh', 'Brythonic', 6),
      list('Breton', 'Brythonic', 6),
      list('Cornish', 'Brythonic', 6),
      list('Cuymbric', 'Brythonic', 6),
      list('Modern Irish', 'Goidelic', 6),
      list('Scottish Gaelic', 'Goidelic', 6),
      list('Manx', 'Goidelic', 6),
      list('Gothic', 'East Germanic', 6),
      list('Low German', 'Middle Low German', 6),
      list('(High) German', 'Middle High German', 6),
      list('Yiddish', 'Middle High German', 6),
      list('English', 'Middle English', 6),
      list('Hollandic', 'Middle Dutch', 6),
      list('Flemish', 'Middle Dutch', 6),
      list('Dutch', 'Middle Dutch', 6),
      list('Limburgish', 'Middle Dutch', 6),
      list('Brabantian', 'Middle Dutch', 6),
      list('Rhinelandic', 'Middle Dutch', 6),
      list('Frisian', 'Old Frisian', 6),
      list('Danish', 'Middle Danish', 6),
      list('Swedish', 'Middle Swedish', 6),
      list('Norwegian', 'Old Norwegian', 6),
      list('Faroese', 'Old Norse', 6),
      list('Icelandic', 'Old Icelandic', 6),
      list('Old Prussian', 'Baltic', 6),
      list('Lithuanian', 'Baltic', 6),
      list('Latvian', 'Baltic', 6),
      list('Polish', 'West Slavic', 6),
      list('Slovak', 'West Slavic', 6),
      list('Czech', 'West Slavic', 6),
      list('Wendish', 'West Slavic', 6),
      list('Bulgarian', 'East Slavic', 6),
      list('Old Church Slavonic', 'East Slavic', 6),
      list('Macedonian', 'East Slavic', 6),
      list('Serbo-Croatian', 'East Slavic', 6),
      list('Slovene', 'East Slavic', 6),
      list('Russian', 'South Slavic', 6),
      list('Ukrainian', 'South Slavic', 6),
      list('Belarusian', 'South Slavic', 6),
      list('Rusyn', 'South Slavic', 6)
    ),
    marker = list(
      symbol = "circle",
      radius = 6,
      # 修正大小写为fillColor
      fillColor = "#ffffff",
      lineWidth = 3
    ),
    dataLabels = list(
      align = "left",
      style = list(color = "#000000", whiteSpace = 'nowrap')
    ),
    levels = list(
      list(level = 1,
           levelIsConstant = FALSE),
      list(level = 2,
           colorByPoint = TRUE),
      list(
        level = 3,
        colorVariation = list(key = 'brightness',
                              to = -0.5)
      ),
      list(
        level = 4,
        colorVariation = list(key = 'brightness',
                              to = 0.5)
      ),
      # 补充缺失的level 5配置
      list(
        level = 5,
        colorVariation = list(key = 'brightness',
                              to = -0.5)
      ),
      list(
        level = 6,
        dataLabels = list(x = 10),
        marker = list(radius = 4)
      )
    )
  )
)

# 使用已加载模块的基础图表，添加系列
hc_base %>%
  hc_chart(backgroundColor = "white") %>%
  hc_add_series_list(series)

额外说明 #

如果hc_add_dependency加载模块失败，可以尝试确保treegraph.js文件版本与Highcharter内置的Highcharts版本一致，避免兼容性问题。若仍有问题，可通过自定义JS事件强制初始化模块：

hc_base %>%
  hc_chart(
    backgroundColor = "white",
    events = list(
      load = JS("function() { if (Highcharts.seriesTypes.treegraph) { this.series[0].init(); } }")
    )
  ) %>%
  hc_add_series_list(series)

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