如何移除Highcharts Sankey图隐藏节点产生的空白区域

你当前用hide()方法仅隐藏节点的视觉元素，但Highcharts仍会为该节点预留布局空间，这就是左侧空白出现的原因。直接设置负边距无法适配所有屏幕，推荐通过更新图表数据源并重绘的方式解决，同时保留未使用的图例。

实现步骤与代码 #

1. 先保存原始数据，方便后续恢复节点：

// 假设chart是你的Sankey图表实例
const originalData = {
  nodes: [...chart.series[0].nodes.map(n => ({...n.options}))],
  links: [...chart.series[0].links.map(l => ({...l.options}))]
};

2. 隐藏第一个节点的核心逻辑：

function hideFirstNode() {
  // 过滤掉第一个节点
  const updatedNodes = chart.series[0].nodes.filter((_, idx) => idx !== 0).map(n => ({...n.options}));
  
  // 获取目标节点的标识（优先用id，无id则用索引）
  const targetNodeKey = originalData.nodes[0].id || 0;
  
  // 过滤掉与目标节点关联的所有链接（包括从该节点出发和指向该节点的）
  const updatedLinks = chart.series[0].links.filter(link => {
    return link.from !== targetNodeKey && link.to !== targetNodeKey;
  }).map(l => ({...l.options}));

  // 更新图表，触发重绘以重新计算布局
  chart.update({
    series: [{
      nodes: updatedNodes,
      links: updatedLinks,
      showInLegend: true // 保持系列在图例中可见
    }]
  }, true); // true表示立即重绘
}

3. 保留未使用图例的处理：
   如果图例项直接关联节点，移除节点后对应的图例项会消失。此时可以手动定义图例项，确保所有需要保留的项都存在：

chart.update({
  legend: {
    items: [
      { name: '被隐藏节点', color: '#你的节点颜色', visible: false }, // 保留图例项但设为不可见
      { name: '节点2', color: '#对应颜色', visible: true },
      // 其他需要保留的图例项...
    ]
  },
  series: [{
    nodes: updatedNodes,
    links: updatedLinks
  }]
}, true);

方案优势 #

• 重绘后图表会自动重新计算布局，彻底消除左侧空白，适配所有屏幕尺寸
• 通过手动定义图例项或保留系列的showInLegend配置，满足“不得移除未使用图例”的要求
• 原始数据已备份，可随时恢复节点显示

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