自定义节点宽度的Highcharts组织图如何在固定宽高容器内居中

解决方案 #

你可以通过动态计算水平边距实现全场景居中：当生成的组织图实际宽度小于iframe容器可视宽度时，将剩余宽度平分作为左右外边距；当组织图宽度超出容器宽度时，边距设为0保留滚动条逻辑即可。

修改后的事件代码如下：

events: {
  load() {
    let chart = this,
        series = chart.series[0],
        // 获取iframe容器的可视宽度
        containerWidth = chart.container.parentElement.clientWidth,
        newHeight = (series.options.nodeWidth + series.options.nodePadding) * (series.nodeColumns.length + 1);

    let tab_length = [];
    for(var i=0; i < series.nodeColumns.length; i++){
      tab_length.push(series.nodeColumns[i].length);
    }
    let max_col = Math.max(...tab_length), newWidth;
        
    if(series.options.width)
      newWidth = (series.options.width + series.options.nodePadding) * max_col + series.options.nodePadding;

    // 计算水平居中所需左外边距
    let marginLeft = newWidth < containerWidth ? (containerWidth - newWidth) / 2 : 0;
        
    chart.update({
      chart: {
        width: newWidth,
        height: newHeight,
        marginLeft: marginLeft
      }
    })
  }
}

补充说明 #

如果需要同时实现垂直居中，可按照相同逻辑获取容器可视高度，计算marginTop值加入配置即可。如果iframe容器存在内边距、边框，计算容器宽高时对应减去对应数值即可避免居中偏差。

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