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

Question

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

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

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

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

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

我面临的问题是，在属性设置为 false 然后返回 true 然后图表调整大小后，有一堆额外的数据标签添加到 canvas.

激活此错误后，您可以通过图例隐藏所有系列，并且标签仍在canvas。

我试过：
- 在堆栈设置为 true
后禁用每个系列的数据标签 - 以编程方式 setting/calling 重绘、回流、设置大小
- axis.update x 和 y
- 以及其他几种骇人听闻的方法

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

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

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

Answer 1

奇怪的问题。我认为可能值得将其作为错误报告。

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

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

JSFiddle

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

Extra Labels on Stacked Column After Label Toggle and Resize

jquery

data-visualization

highcharts

highstock