标签切换和调整大小后堆叠列上的额外标签

Question

我正在开发一个使用 Highstock 随时间推移显示多个系列的应用程序。这些系列是堆叠的。

如果数据点很多，数据标签可能会变得混乱。我添加了一个复选框来切换yaxis 的stackLabels.enabled 属性，使用以下代码：

function toggleDataLabels(enableDataLabels) {
    var chart = $('#container').highcharts();

    chart.yAxis.forEach(function (axis) {
        axis.update({
            stackLabels: {
                enabled: enableDataLabels
            }
        });
    });
};

这按预期工作。询问时隐藏，询问时显示。

我面临的问题是，在属性设置为false 然后回到true THEN 图表调整大小后，画布上添加了一堆额外的数据标签。

激活此bug后，您可以通过图例隐藏所有系列，标签仍在画布上。

我试过了：
- 在堆栈设置为 true 后禁用每个系列上的数据标签
- 以编程方式设置/调用重绘、回流、设置大小
- x 和 y 上的axis.update
- 以及其他一些 hacky 方法

我尝试过的任何方法都无法消除这些额外的数据标签。

看看这个小提琴http://jsfiddle.net/d84dgrs9/（有点粗糙，但它明白了重点）
产生错误的步骤：
- 从范围选择器中选择：1m 以减少混乱
- 取消选中切换数据标签以隐藏数据标签
- 选中切换数据标签以显示数据标签
- 使用垂直滑块调整窗格大小
繁荣！各种额外的标签。

任何见解都会令人惊叹。也许这是向 highcharts 错误跟踪器报告的内容。

Answer 1

奇怪的问题。我认为它可能值得作为一个错误报告。

无论如何，我找到了解决方法。如果您使用 CSS 隐藏/显示标签而不是 highcharts 选项，则额外的标签不会重新出现。作为额外的好处，它的运行速度要快得多。

function toggleDataLabels(enableDataLabels) {
    if (enableDataLabels) 
        $('g.highcharts-stack-labels').css('visibility', 'visible');
    else 
        $('g.highcharts-stack-labels').css('visibility', 'hidden');
};

JSFiddle