如何使用Plotly JS实现图表自动滚动或自动平移功能？

实现方案 #

• 首先确认：extendTraces 操作会触发 after_plot 事件，所有触发图表重绘的官方API操作都会触发该事件。
• plotly.js没有内置的自动平移专用函数，可以通过以下两种常用方案实现指定点数后自动右移的效果：

方案1：删除历史数据+视图平移（适合不需要保留全量历史数据的场景）

每次新增数据后判断当前数据点数量，超过阈值时删除最早的1个数据点，同时调整x轴范围：

const MAX_DISPLAY_POINTS = 20;
const chartDom = document.getElementById('你的图表容器ID');

function appendData(newX, newY) {
  // 追加新数据
  Plotly.extendTraces(chartDom, {
    x: [[newX]],
    y: [[newY]]
  }, [0]); // 末尾的[0]代表操作索引为0的trace，多线条时可传入对应索引数组

  const currentX = chartDom.data[0].x;
  if (currentX.length > MAX_DISPLAY_POINTS) {
    // 移除最早的1个数据点
    Plotly.update(chartDom, {
      x: [currentX.slice(1)],
      y: [chartDom.data[0].y.slice(1)]
    }, {}, [0]);
    // 调整x轴范围实现平移效果
    Plotly.relayout(chartDom, {
      'xaxis.range': [currentX[1], newX]
    });
  }
}

方案2：保留全量数据+仅调整视图范围（适合需要留存所有历史数据的场景）

可以直接绑定after_plot事件，每次图表重绘后自动调整x轴的可见范围，仅展示最近20个数据点：

const MAX_VIEW_POINTS = 20;
const chartDom = document.getElementById('你的图表容器ID');

chartDom.on('after_plot', () => {
  const currentX = chartDom.data[0].x;
  if (currentX.length > MAX_VIEW_POINTS) {
    Plotly.relayout(chartDom, {
      'xaxis.range': [
        currentX[currentX.length - MAX_VIEW_POINTS],
        currentX.at(-1)
      ]
    });
  }
});

如果不需要全局绑定事件，也可以直接把调整逻辑写到extendTraces的回调函数中，触发时机更精准：

Plotly.extendTraces(chartDom, {x: [[newX]], y: [[newY]]}, [0], () => {
  // 此处写入长度判断与x轴范围调整逻辑即可
});

内容的提问来源于stack exchange，提问作者Paul Côté