Highcharts - 我的数据是什么导致 "setExtremes" 无法正常工作？
Highcharts - what is it about my data that causes "setExtremes" to not work correctly?
我正在构建一个甘特里程碑图表，显示多个项目的某些里程碑，每个项目都可以被视为一个“组”的一部分。
图表最初加载时，我显示所有项目，并通过调用 chart.xAxis[0].setExtremes().[= 将“今年”的 1 月 1 日自定义缩放级别设置为未来五年的 1 月 1 日37=]
有一个允许按项目组过滤的控件。每次进行新的过滤 selection 时，图表都会重新加载，并且我将缩放比例重置为相同的范围。
但是，对于某些数据，setExtremes 未得到遵守，并且 Highcharts 自行决定要显示的范围，我不明白为什么。特别是因为如果我显示来自一组的数据（例如“第 4 组”），缩放会受到尊重，但是如果我添加到另一组（例如显示“第 4 组” 和 “组2")，不考虑缩放。
但是 - 如果我用不同的数据集尝试同样的事情（例如显示“第 5 组”，然后添加“第 2 组”），那么在添加似乎是“可疑”数据。
非常混乱。
我设置了一个 code sandbox 使用假项目和组名称，但使用实际日期数据。
如果您在编辑器外部加载沙箱，也可能更容易查看：https://g26rq.csb.app/
导致此行为的数据是什么？
更新以解决评论：
所有需要的数据都是在初始组件安装时从服务器获取的，并以一种我可以在过滤器设置更改时从中提取的方式存储在状态中，这样我就不必继续返回服务器.
也就是说，操作顺序是这样设置的：
- 组过滤器 select 控件上的任何“更改”事件都会以 Highcharts 图表组件应 unmounted/destroyed 的方式设置整体组件状态。 （基本上我存储系列数据的状态位是cleared/emptied。）
- 所有 selection 完成后，select 控件上的“blur”事件开始处理数据 transformation/application。
- 从state整体数据存放处拉取filter设置对应的数据，转化为需要的Highcharts系列格式，然后将series数据设置成状态。
- 组件重新呈现状态中的系列数据后，允许呈现 Highcharts 组件，我在 Highcharts 组件属性中指定了一个回调函数，它对应于一个
chart.events.load 事件处理程序。由于之前的图表已被销毁，现在基本上正在重新创建，因此将发生 load 事件。
- callback/load 事件处理程序调用
setExtremes。
我看到添加到 render 事件的 console.log 发生在 console.log 我放入我调用 setExtremes 的函数之后，但那是预期的。根据关于 load and render 事件的 Higcharts 文档：
load: Highcharts.ChartLoadCallbackFunction
Fires when the chart is finished loading.
...
There is also a second parameter to the chart constructor where a callback function can be passed to be executed on chart.load.
（我猜 Highcharts React 组件正在使用它来传递我在组件的 callback 属性中指定的回调函数。）
render: Highcharts.ChartRenderCallbackFunction
Fires after initial
load of the chart (directly after the load event), and after each
redraw (directly after the redraw event).
所以 render 在我 setExtremes 之后发生也就不足为奇了，但这并不一定意味着我在图表准备好之前调用 setExtremes。考虑到每次过滤器设置更改时我都是 destroying/re-creating 图表，并且 render 可能会被用户的任何手动缩放更改触发（更不用说可能在我自己强制 setExtremes)，在我看来，load 事件中的 setExtremes 正是它应该发生的地方。
我仔细研究了这个问题，它似乎与 xAxis minRange 属性 有关，因为默认情况下它被计算为：
The default minRange for the x axis is five times the smallest interval between any of the data points.
所以您的极端情况不适合某些数据集。
演示：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
我正在构建一个甘特里程碑图表，显示多个项目的某些里程碑，每个项目都可以被视为一个“组”的一部分。
图表最初加载时，我显示所有项目，并通过调用 chart.xAxis[0].setExtremes().[= 将“今年”的 1 月 1 日自定义缩放级别设置为未来五年的 1 月 1 日37=]
有一个允许按项目组过滤的控件。每次进行新的过滤 selection 时，图表都会重新加载，并且我将缩放比例重置为相同的范围。
但是，对于某些数据，setExtremes 未得到遵守，并且 Highcharts 自行决定要显示的范围，我不明白为什么。特别是因为如果我显示来自一组的数据（例如“第 4 组”），缩放会受到尊重，但是如果我添加到另一组（例如显示“第 4 组” 和 “组2")，不考虑缩放。
但是 - 如果我用不同的数据集尝试同样的事情（例如显示“第 5 组”，然后添加“第 2 组”），那么在添加似乎是“可疑”数据。
非常混乱。
我设置了一个 code sandbox 使用假项目和组名称，但使用实际日期数据。
如果您在编辑器外部加载沙箱，也可能更容易查看：https://g26rq.csb.app/
导致此行为的数据是什么？
更新以解决评论：
所有需要的数据都是在初始组件安装时从服务器获取的，并以一种我可以在过滤器设置更改时从中提取的方式存储在状态中，这样我就不必继续返回服务器.
也就是说，操作顺序是这样设置的：
- 组过滤器 select 控件上的任何“更改”事件都会以 Highcharts 图表组件应 unmounted/destroyed 的方式设置整体组件状态。 （基本上我存储系列数据的状态位是cleared/emptied。）
- 所有 selection 完成后，select 控件上的“blur”事件开始处理数据 transformation/application。
- 从state整体数据存放处拉取filter设置对应的数据，转化为需要的Highcharts系列格式，然后将series数据设置成状态。
- 组件重新呈现状态中的系列数据后，允许呈现 Highcharts 组件，我在 Highcharts 组件属性中指定了一个回调函数，它对应于一个
chart.events.load事件处理程序。由于之前的图表已被销毁，现在基本上正在重新创建，因此将发生load事件。 - callback/load 事件处理程序调用
setExtremes。
我看到添加到 render 事件的 console.log 发生在 console.log 我放入我调用 setExtremes 的函数之后，但那是预期的。根据关于 load and render 事件的 Higcharts 文档：
load: Highcharts.ChartLoadCallbackFunction
Fires when the chart is finished loading.
...
There is also a second parameter to the chart constructor where a callback function can be passed to be executed on chart.load.
（我猜 Highcharts React 组件正在使用它来传递我在组件的 callback 属性中指定的回调函数。）
render: Highcharts.ChartRenderCallbackFunction
Fires after initial load of the chart (directly after the
loadevent), and after each redraw (directly after theredrawevent).
所以 render 在我 setExtremes 之后发生也就不足为奇了，但这并不一定意味着我在图表准备好之前调用 setExtremes。考虑到每次过滤器设置更改时我都是 destroying/re-creating 图表，并且 render 可能会被用户的任何手动缩放更改触发（更不用说可能在我自己强制 setExtremes)，在我看来，load 事件中的 setExtremes 正是它应该发生的地方。
我仔细研究了这个问题，它似乎与 xAxis minRange 属性 有关，因为默认情况下它被计算为：
The default minRange for the x axis is five times the smallest interval between any of the data points.
所以您的极端情况不适合某些数据集。
演示：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