NG2-chart/Chart.js 在 chromium 中的垂直图中添加新数据时向上滚动

Question

我对 NG2-chart/Chart-js 有疑问。我们为一个上下移动杆的项目制作了一个包含 4 个双图的页面。当数据集超出显示范围时，系统将向下滚动新数据。这是在 Firefox 中测试的。

但是在测试过程中，我们发现当我们向上移动时（想想：123454321），我们的系统会陷入困境，并且图表的帧时间会很高（从 60 毫秒上升到近 1000 毫秒）。为了克服这个问题，代码在 Chrome/Edge 上运行，代码的执行效果更好（向上行程仍然较慢）。基于 Chromium 的浏览器会不断地弹回到显示范围的起始排列。滚动是可能的，有时会“卡在”滚动位置，但这并不一致

图表是这样构建的

const options: ChartConfiguration['options'] = {
  indexAxis: 'y',
  animation: false,
  maintainAspectRatio: false,
  responsive: true,
  parsing: false,
  scales: {
    y: {
      beginAtZero: true,
      min: 0,
      max: this.setMaxDepth(this.config.maxDepth),
      type: 'linear',
      reverse: true,
      ticks: tick,
    },
    'top-x-axis': {
      display: true,
      min: this.config.channels[0].minValue,
      max: this.config.channels[0].maxValue,
      type: 'linear',
      position: 'top',
      grid: {},
      ticks: {
        maxTicksLimit: 6,
        color: '#FFFFFF00',
        display: true,
      },
    },
    'bottom-x-axis': {
      display: true,
      min: this.config?.channels[1]?.minValue,
      max: this.config?.channels[1]?.maxValue,
      type: 'linear',
      position: 'bottom',
      grid: {},
      ticks: {
        maxTicksLimit: 6,
        color: '#FFFFFF00',
        display: true,
      },
    },
  },
  elements: {
    point: {
      radius: 0,
    },
    line: {
      borderWidth: 1,
    },
  },
};
return options;

}