时间戳

首页 > 解决方案 > Highcharts - 我的数据是什么导致“setExtremes”无法正常工作？

javascript - Highcharts - 我的数据是什么导致“setExtremes”无法正常工作？

问题描述

我正在构建一个甘特里程碑图表，显示来自多个项目的某些里程碑，并且每个项目都可以被视为“组”的一部分。

当图表最初加载时，我会显示所有项目，并通过调用将“今年”的 1 月 1 日自定义缩放级别设置为五年后的 1 月 1 日chart.xAxis[0].setExtremes()。

有一个控件允许按项目组进行过滤。每次进行新的过滤选择时，图表都会重新加载，并且我将缩放重置为相同的范围。

但是，对于某些数据，setExtremes不尊重，Highcharts 自己决定要显示的范围，我不知道为什么。特别是因为如果我显示来自一个组（例如“Group 4”）的数据，则会尊重缩放，但是如果我添加到另一组（例如显示“Group 4”和“Group 2”），则不会尊重缩放.

但是 - 如果我用不同的数据集尝试同样的事情（例如显示“第 5 组”，然后添加“第 2 组”），那么在添加似乎是“可疑”数据后，缩放将保持正确。

很混乱。

我用虚假的项目和组名设置了一个代码沙箱，但使用了实际的日期数据。

如果您在编辑器之外加载沙箱，也可能更容易查看：https ://g26rq.csb.app/

导致这种行为的数据是什么？

更新以解决评论：

所需的所有数据都是在初始组件安装时从服务器获取的，并以某种方式存储在状态中，当过滤器设置更改时我可以从中提取，因此我不必继续返回服务器。

话虽如此，操作顺序是这样设置的：

  1. 组过滤器选择控件上的任何“更改”事件都会以这样的方式设置整体组件状态，即应该卸载/销毁 Highcharts 图表组件。（基本上，我存储系列数据的状态位被清除/清空。）
  2. 在所有选择都完成后，选择控件上的“模糊”事件开始数据转换/应用过程。
  3. 与过滤器设置对应的数据从存储状态的整体数据中提取，转换为必要的 Highcharts 系列格式，然后将系列数据设置为状态。
  4. 在组件使用 state 中存在的系列数据重新渲染后，Highcharts 组件被允许渲染，并且我在 Highcharts 组件的 props 中指定了一个回调函数，该函数对应于一个chart.events.load事件处理程序。由于之前的图表已被破坏并且现在基本上正在重新创建，因此该load事件将会发生。
  5. 回调/加载事件处理程序是调用setExtremes.

我看到console.log添加到render事件发生在console.log我放入我调用的函数之后setExtremes，但这是可以预料的。根据关于load和render事件的 Higcharts 文档：

加载：Highcharts.ChartLoadCallbackFunction

当图表完成加载时触发。

...

图表构造函数还有第二个参数，其中可以传递回调函数以在 chart.load 上执行。

（我猜 Highcharts React 组件正在使用它来传递我在组件的callbackprop 中指定的回调函数。）

渲染： Highcharts.ChartRenderCallbackFunction

在图表初始加载（事件之后load）和每次重绘之后（事件之后）触发redraw。

因此，render在 I 之后发生这种情况也就不足为奇了setExtremes，但这并不一定意味着我setExtremes在图表准备好之前就打电话了。考虑到每次过滤器设置更改时我都会破坏/重新创建图表，并且render可能会被用户手动缩放更改触发（更不用说可能在我自己强制之后触发setExtremes），在我看来，这样做my setExtremesfrom the loadevent 正是它应该发生的地方。

标签： javascripthighchartsreact-highcharts

解决方案

我仔细研究了这个问题，似乎它与 xAxisminRange属性有关，因为默认情况下它被计算为：

x 轴的默认 minRange 是任何数据点之间最小间隔的五倍。

所以你的极端不适合某些数据集。

演示：https ://jsfiddle.net/BlackLabel/mnfb3pv1/

作为一种解决方案，您可以将 minRange 设置为某个固定值：

演示：https ://jsfiddle.net/BlackLabel/pu60fkaL/

您的演示集minRange：https ://codesandbox.io/s/gantt-wrong-zoom-forked-b5dhl?file=/src/App.js

API：https ://api.highcharts.com/highstock/xAxis.minRange

推荐阅读