如何在plotly.js图表中隐藏shapes元素避免y轴被压缩？

问题核心原因 #

Plotly 自动计算坐标轴范围时，会把shapes配置内所有元素的坐标值纳入计算范围。如果硬编码写入固定y值的红色上限线，即使当前所有柱形的y值远低于该上限，y轴也会自动拉伸到上限值位置，导致柱形被人为压缩显示。

实现方案 #

不要硬编码固定的shapes数组，在渲染图表前动态判断是否需要注入上限线元素，只有满足触发条件时才渲染对应线条：

• 先计算当前数据集的实际y轴最大值

// 提取所有柱状图序列的y值，计算实际数据峰值
const allBarYValues = yourPlotTraces.flatMap(trace => trace.y);
const actualYMax = Math.max(...allBarYValues);
// 业务侧预先定义的上限阈值
const PRESET_UPPER_LIMIT = 100;

• 按规则动态组装shapes配置
  你可以根据业务需求自定义线条显示规则，比如实际峰值达到阈值的70%以上才显示线条，彻底避免低数值场景下线条拉伸轴范围的问题：

const dynamicShapes = [];
// 触发显示的判断条件，可根据业务场景调整阈值比例
if (actualYMax >= PRESET_UPPER_LIMIT * 0.7) {
  dynamicShapes.push({
    type: 'line',
    xref: 'paper', // 让线条横跨整个绘图区x轴宽度
    x0: 0,
    x1: 1,
    y0: PRESET_UPPER_LIMIT,
    y1: PRESET_UPPER_LIMIT,
    line: {
      color: '#ff0000',
      width: 2,
      dash: 'dash' // 可按需调整为实线/其他虚线样式
    }
  });
}
// 将组装完成的shapes传入layout配置
const plotLayout = {
  // 保留你原有的其余layout配置
  shapes: dynamicShapes,
  yaxis: {
    autorange: true // 保持y轴自动适配范围，不要硬编码固定range值
  }
};

• 动态更新场景适配
  如果你的图表存在数据筛选、维度切换等重绘操作，每次调用Plotly.react()重绘前，都重新执行上述最大值计算和shapes组装逻辑，不要复用旧的shapes配置即可。

参考效果 #

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