React Highcharts Treemap：自定义矩形框的显示顺序

一、整体实现步骤 #

1. 安装依赖
   在React项目中安装所需包：

   npm install highcharts highcharts-react-official
   

2. 加载Treemap模块
   在组件文件中导入Highcharts、React封装组件及Treemap模块，并初始化模块：

   import Highcharts from 'highcharts';
   import HighchartsReact from 'highcharts-react-official';
   import treemap from 'highcharts/modules/treemap';
   
   // 初始化Treemap模块
   treemap(Highcharts);
   

3. 扩展Treemap的节点排序逻辑
   重写Treemap系列的sortNodes方法，调整目标节点的排序位置：

   // 重写排序方法，将特定节点移到排序队列末尾
   Highcharts.seriesTypes.treemap.prototype.sortNodes = function (nodes) {
     // 先执行默认排序（默认按value降序）
     const sortedNodes = Highcharts.seriesTypes.treemap.prototype.sortNodes.call(this, nodes);
     
     // 定义需要固定位置的节点标识（可根据name、id或自定义属性判断）
     const targetNodeName = '特定项';
     const targetNode = sortedNodes.find(node => node.name === targetNodeName);
     
     if (targetNode) {
       // 移除目标节点并追加到队列末尾
       const idx = sortedNodes.indexOf(targetNode);
       sortedNodes.splice(idx, 1);
       sortedNodes.push(targetNode);
     }
     
     return sortedNodes;
   };
   

4. 配置图表并渲染
   定义Treemap的配置选项，传入包含目标节点的数据，最后通过HighchartsReact组件渲染：

   const TreemapComponent = () => {
     const chartOptions = {
       series: [{
         type: 'treemap',
         layoutAlgorithm: 'squarified', // 可根据需求替换为其他布局算法
         data: [
           { name: '项1', value: 10 },
           { name: '项2', value: 20 },
           { name: '特定项', value: 5 },
           { name: '项3', value: 15 }
         ]
       }]
     };
   
     return <HighchartsReact highcharts={Highcharts} options={chartOptions} />;
   };
   
   export default TreemapComponent;
   

二、扩展组件后自定义显示顺序 #

Treemap的节点布局顺序完全由sortNodes方法的返回值决定，你可以通过以下方式自定义排序规则：

1. 基于自定义属性筛选排序
   给需要固定位置的节点添加自定义属性，比如fixedPosition: true，然后在排序时分离处理：

   Highcharts.seriesTypes.treemap.prototype.sortNodes = function (nodes) {
     // 分离固定节点与普通节点
     const fixedNodes = nodes.filter(node => node.fixedPosition);
     const normalNodes = nodes.filter(node => !node.fixedPosition);
     
     // 普通节点按自定义规则排序（示例：按value降序）
     normalNodes.sort((a, b) => b.value - a.value);
     
     // 合并队列：普通节点在前，固定节点在后
     return [...normalNodes, ...fixedNodes];
   };
   

   对应的数据配置：

   data: [
     { name: '项1', value: 10 },
     { name: '项2', value: 20 },
     { name: '特定项', value: 5, fixedPosition: true },
     { name: '项3', value: 15 }
   ]
   

2. 完全自定义排序逻辑
   如果不需要默认排序规则，可以直接编写自定义排序逻辑，比如按名称、自定义权重等排序，最后将目标节点放到指定位置：

   Highcharts.seriesTypes.treemap.prototype.sortNodes = function (nodes) {
     // 自定义普通节点排序规则（示例：按名称升序）
     const sortedNormal = nodes
       .filter(node => node.name !== '特定项')
       .sort((a, b) => a.name.localeCompare(b.name));
     
     // 找到目标节点
     const targetNode = nodes.find(node => node.name === '特定项');
     
     // 合并队列
     return targetNode ? [...sortedNormal, targetNode] : sortedNormal;
   };
   

注意事项 #

• 不同的布局算法（如stripes、sliceAndDice）会影响节点的填充方向，需根据实际使用的算法调整排序逻辑，确保目标节点落在左侧末尾位置；
• 扩展代码需在渲染图表前执行，避免Highcharts已初始化Treemap系列导致扩展失效。

内容的提问来源于stack exchange，提问作者B. Grossman