JavaScript中Plotly每秒更新数据时Autoscale等轴操作后快速回弹问题

问题根因 #

该回弹现象本质是每次新增数据调用Plotly更新接口时，默认覆盖了用户手动调整的坐标轴范围配置，强制重置回了最近数据的尾部视图，和Autoscale功能本身无关。

可行解决方案 #

方案1：使用增量数据更新接口，不修改现有布局 #

优先选择Plotly.extendTraces()接口做增量数据追加，该接口默认不会修改当前已生效的layout配置，不会覆盖用户调整的轴范围：

// 示例：向索引为0的trace追加单条新数据
Plotly.extendTraces('你的图表DOM ID', {
  x: [[新的x轴数值]],
  y: [[新的y轴数值]]
}, [0])

方案2：添加用户操作标记，手动控制轴范围更新逻辑 #

如果需要保留默认的「用户未操作时自动展示最新数据」的特性，可以添加开关控制轴范围是否自动更新：

1. 监听Plotly的plotly_relayout事件，用户触发缩放、平移、Autoscale等轴操作时，将标记位设为true
2. 每次新增数据时，只有标记位为false时才自动设置x轴范围为尾部视图

let userModifiedAxis = false
const chartDom = document.getElementById('你的图表DOM ID')
// 监听用户轴操作
chartDom.on('plotly_relayout', () => {
  userModifiedAxis = true
})

// 每秒新增数据的逻辑
setInterval(() => {
  const newX = Date.now() / 1000
  const newY = Math.random() * 100
  // 增量追加数据
  Plotly.extendTraces(chartDom, {x: [[newX]], y: [[newY]]}, [0])
  // 仅用户未手动操作时，自动保持尾部视图
  if (!userModifiedAxis) {
    const showLatestCount = 500 // 默认展示最近500条数据
    Plotly.relayout(chartDom, 'xaxis.range', [newX - showLatestCount, newX])
  }
}, 1000)

// 可选：添加恢复自动滚动按钮，重置标记位即可
document.getElementById('resumeAutoBtn').addEventListener('click', () => {
  userModifiedAxis = false
})

方案3：全量更新时保留现有轴配置 #

如果业务逻辑必须使用Plotly.react()做全量数据更新，更新前先读取当前图表的layout配置，保留用户设置的轴范围：

const currentLayout = chartDom.layout
Plotly.react(chartDom, 全量新数据数组, {
  // 复用当前布局，仅覆盖你需要修改的特定配置
  ...currentLayout,
  yaxis: {
    ...currentLayout.yaxis,
    // 仅修改需要调整的y轴属性，不要改range
  }
})

现象演示截图 #

• 图1：Plotly默认展示的尾部视图，x轴仅显示最近约500秒的数据
  
• 图2：点击Autoscale后瞬间展示的全量数据视图，留存时间极短
  
• 图3：点击Autoscale不足1秒后回弹回的尾部视图
  

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