Highcharts dataLabels 允许重叠不起作用

Question

在系列的dataLabels 选项中，我将allowOverlap 设置为false。但是，我仍然得到重叠的标签。诚然，我的实际实现是真正定制和定制的，我尝试创建一个简单的 jsfiddle 来重现这一点，但不能。

但是，我已经找到了我认为的问题所在，至少在 html 输出中。

在this example 中，当我在 Chrome 开发工具中检查标签元素时，我看到前几个标签如下所示：

似乎highcharts-data-label-hidden 类与opacity: 0 一起使用，这隐藏了相关标签。在未应用该类标签的情况下，opacity 设置为 1，以显示标签。它可以正常工作；此示例中没有重叠的标签。

但是，通过我自己的代码的输出，我看到如下内容：

在我的输出中，显示了所有标签；没有一个是隐藏的；许多是重叠的。似乎highcharts-data-label-hidden 类已正确应用于某些标签，即那些应该隐藏以避免重叠的标签。但同时，这些元素的opacity 设置为1 而不是0...实际上所有元素都有opacity 的1...因此所有我的标签都显示出来了，结果很多都重叠了。

果然，如果我在开发工具中动态编辑样式标签，将那些具有highcharts-data-label-hidden 类的元素的opacity 更改为0，标签的布局就会很好，没有任何重叠。

尽管显然正确分配了highcharts-data-label-hidden 类，但我已经徒劳地尝试了几个小时来弄清楚为什么我的代码将opacity 设置为1，即使对于这些应该隐藏的标签也是如此。我需要你的帮助，即使基于这个公认的有限信息。

一个线索可能是我还注意到highcharts-data-label-color-0 类出现在每个元素的工作示例中，而highcharts-data-label-color-undefined 出现在我的。查看 HC 源代码，这似乎来自dataLabel.addClass(' highcharts-data-label-color-' + point.colorIndex ...，所以我的point.colorIndex 必须以undefined 结尾，但我不确定为什么，或者这是否与我的问题有关看到非隐藏标签。我在我的代码中使用点和标签着色做一些“高级”的东西，这样我就可以设置标签的颜色以匹配点的颜色，即使颜色渐变生效（这是在图表之后完成的负载）。但我没有对标签不透明度做任何事情，据我所知......甚至不知道如何......dataLabels 对象甚至没有要更改的opacity 元素。

任何帮助表示赞赏！

编辑

终于成功发了simple repro，只是为了证明我不会发疯！如果您运行此示例并检查重叠的标签元素，您将看到（如上所述）许多具有highcharts-data-label-hidden 类，但也具有opacity: 1，使它们在不应该出现时可见。

（部分）解决方案似乎是在每个系列循环之后执行series.update(false)（在此示例中只有一个系列），而不是在最后执行chart.update()...根据this updated example。问题：为什么不需要将true 传递到更新中？

然而，虽然这是一个改进，但仍有一个奇怪的地方......加载后，尝试点击 Unset Extremes 按钮......标签再次重叠。

这不仅仅是在没有参数的情况下调用setExtremes()...加载this example并点击Set Extremes一次（OK）然后两次（NOT OK）...这个例子中唯一的变化是使用比原始更广泛的极端，以便标签重叠。在这个例子中更奇怪的是，一些标签仍然隐藏，而另一些则没有......这不是全部或全部。

即使第一个 simple repro 在打开时不起作用，如果您点击 Set Extremes，然后是 Unset Extremes，标签不再重叠。但是再次击中 Unset Extremes，它们再次重叠。无法弄清楚这里发生了什么。

事实上，我花了一段时间制作这个复制品，现在我注意到我在帖子开头给出的original example 也显示了这种行为，而不需要load() 事件......再次打开它。 .. 起初看起来不错，但随后点击了 Unset Extremes 按钮...标签重叠！在这个slight modification 中，我所做的只是扩大了 Set Extremes 的范围......加载它并点击 Set Extremes（OK）然后再次（NOT OK）。

在这种情况下，无论设置什么轴极值（以及设置极值的顺序如何），如何始终确保标签不重叠？

Answer 1

感谢您重现该问题。就像我之前想的那样——这是一种回归。在 8.0.4 版本中一切正常。我已经在 Highcharts GitHub 问题频道上报告了它，你可以关注这个帖子：

https://github.com/highcharts/highcharts/issues/13742

最后一个稳定版本：https://jsfiddle.net/BlackLabel/vwc34nhz/

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/8.0.4/highcharts.js"></script>

<div id="container"></div>

<button id="setextremes">Set extremes</button>
<button id="unsetextremes">Unset extremes</button>

如果您不需要任何新功能，请使用 8.0.4 版本，直到我们的核心开发人员解决此问题。