滚动条上的Highcharts奇怪行为

f1tvaqid  于 2022-11-10  发布在  Highcharts
关注(0)|答案(1)|浏览(241)

我用Highcharts来绘制一些简单的图表,我用HighchartStock来使用滚动条功能,因为我需要打印大量的数据。所以我有一个表来绘制图表,并通过一些模块来过滤将要显示的数据。
我得到了这个奇怪的行为,在滚动条不能设置极端最小和最大,当发生?渲染图表有15 ~条数据,(我们使用图表.类型bar)我们限制极端设置它这样

chart.xAxis[0].update(
    {
      min: 0
      max: 9 
    }
)

我们只是redraw()图表。因此,有5个柱没有显示,因为我们设置了限制,这是正确的。问题发生在下面的步骤。
有了15条数据,向下滚动到最后一条,然后用新数据更新图表,但数据量要少一些:5 ~条时,图表将滚动条保持在上次索引的位置,而不会将视图重置到它应该在的位置。在这种情况下,每当条或数据的数量低于10~时,我们将setExtremes。因此,它建议只查看图表中的5个条形,但它显示了之前显示的所有最新数据指标。现在,如果你从少量数据渲染到一个新的过滤器,并且比上一个过滤器大,它会保持最大视图和最小视图的最新更新,所以即使有13个条,它也会显示5个条。(更新参数甚至不起作用)
有一个演示,你可以重现我的问题。Highcharts ScrollBar Issue

fwzugrvs

fwzugrvs1#

首先,在每次操作后重新绘制图表--只需要重新绘制一次就足够了。为了摆脱主要问题,请使用setExtremes方法而不是update方法。

HC.addSeries({
    data: Data
  }, false);

  let MaxViewItems = 0;

  if (RandyIndex > 10) {
    MaxViewItems = 10;
  } else if (RandyIndex <= 10) {
    MaxViewItems = RandyIndex;
  }

  HC.xAxis[0].setExtremes(0, MaxViewItems - 1, false);

  HC.redraw();

现场演示:https://jsfiddle.net/BlackLabel/zmfLrp6y/
**API参考:**https:api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

相关问题