仅当用户看到最新数据时，才对新数据自动滚动高图表

Question

我的反应应用程序库存很高。我添加了历史数据上传功能。我的问题是我需要同时添加历史数据和可能同时发生的新数据。我需要了解用户当前在图表上的位置。如果图表已滚动并且用户看到了历史数据，那么在添加新数据的情况下，我无需执行任何操作。但是，如果用户看到最新数据并且图表获得了新数据（不是历史数据），则需要自动滚动图形以显示最新数据。当然，用户可以前后滚动图形。我试图通过下一个条件来改变极端：

if ( extremes.userMax === oldMax && extremes.userMax < dataMax ) {
 e.target.xAxis[ 0 ].setExtremes(
    dataMax - ( userMax - userMin ),
    dataMax
 );
}

但是它不起作用。

是否可以确定图表上的当前用户位置？

上面的代码已添加为事件回调以进行重画。

Answer 1

感谢您的回复。

这里是用于自动滚动图表的完整代码：

if ( e.target.xAxis ) {
   const extremes = e.target.xAxis[ 0 ].getExtremes();
   const { userMax, userMin, oldMax, dataMax } = e.target.xAxis[ 0 ];
   if ( extremes.userMax === oldMax && extremes.userMax < dataMax ) {
   e.target.xAxis[ 0 ].setExtremes(
      dataMax - ( userMax - userMin ),
      dataMax
   );
}

可能需要说明如何在redux中存储和更改数据。所有图表数据都放在数组中：

[{
  open(pin):1
  high(pin):3
  low(pin):1
  close(pin):2
  volume(pin):10
  x(pin):1581850800000
}, ...
]

因此，如果我需要从服务器上传历史数据，我只需将数据添加到数组的开头。万一我需要向图表添加新蜡烛，我只需在数组末尾推送新元素。图表组件通过redux更新获得新的序列数组。

UPD：

我终于用重绘事件中的下一个逻辑解决了我的问题：

            if ( dataMax - userMax < pointRange * 2 ) {
                e.target.xAxis[ 0 ].setExtremes(
                    dataMax - ( userMax - userMin ),
                    dataMax,
                    false
                );
            }

想法是从用户视图中检查多少支蜡烛，如果多于2条，则不执行任何操作，否则移动图表以显示最新的蜡烛。setExtremes中的false需要避免无限重绘。