无需编译Highcharts源码，能否在HTML/JS项目中注册自定义图表类型？

核心思路：基于现有Sankey系列扩展，绕过SeriesRegistry限制 #

不需要搭建编译环境，直接通过纯HTML/JS代码就能实现类似Organization图的自定义变体，以下是具体方案：

• 用H.wrap重写Sankey的核心方法
  不用注册新系列类型，直接修改Sankey的渲染、布局逻辑来模拟Organization图的特性。比如调整节点排列、形状或链接样式：

  // 示例：修改Sankey节点的布局与样式，模拟Organization的垂直层级
  Highcharts.wrap(Highcharts.seriesTypes.sankey.prototype, 'drawNodes', function(proceed) {
    // 先执行原节点绘制逻辑
    proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    
    // 自定义节点布局：同层级节点垂直均匀分布
    const series = this;
    const levelGroups = {};
    // 按层级分组节点
    series.nodes.forEach(node => {
      const level = node.level || 0;
      if (!levelGroups[level]) levelGroups[level] = [];
      levelGroups[level].push(node);
    });
  
    // 调整每个层级的节点位置
    Object.values(levelGroups).forEach((nodes, levelIndex) => {
      const spacing = series.chart.plotHeight / (nodes.length + 1);
      nodes.forEach((node, idx) => {
        // 水平位置按层级偏移
        node.shapeArgs.x = series.chart.plotLeft + levelIndex * 220;
        // 垂直位置均匀分布
        node.shapeArgs.y = spacing * (idx + 1) - node.shapeArgs.height / 2;
        // 修改节点样式为圆角矩形
        node.graphic.attr({ rx: 6, ry: 6 });
      });
    });
  });
  

• 直接注册自定义系列类型（绕过SeriesRegistry）
  如果需要独立的自定义系列标识，可以直接修改Highcharts.seriesTypes对象来完成注册，无需依赖未暴露的registerSeriesType：

  // 基于Sankey扩展自定义组织图系列
  Highcharts.seriesTypes.customOrg = Highcharts.extendClass(Highcharts.seriesTypes.sankey, {
    type: 'customOrg',
    // 重写布局逻辑
    arrangeNodes: function() {
      // 调用Sankey的原布局方法
      Highcharts.seriesTypes.sankey.prototype.arrangeNodes.call(this);
      // 添加Organization风格的层级调整逻辑
      this.nodes.forEach(node => {
        // 强制节点按垂直层级对齐，避免Sankey的自动堆叠
        node.y = (node.level * 150) + 50;
      });
    }
  });
  
  // 在图表配置中使用自定义系列
  Highcharts.chart('container', {
    series: [{
      type: 'customOrg',
      data: [
        ['CEO', '部门A'],
        ['CEO', '部门B'],
        ['部门A', '员工1'],
        ['部门A', '员工2']
      ]
    }]
  });
  

注意事项 #

• 上述方法依赖Highcharts的内部对象结构，建议锁定使用的Highcharts版本（比如固定引入highcharts@10.x的CDN资源），避免版本更新导致兼容问题。
• 所有代码可直接放在HTML的<script>标签中，只需提前引入官方CDN的Highcharts核心库和Sankey模块即可。

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