Highcharts饼图切片动画仅在抛出错误时有效

Question

我有这个功能，可以从中心径向向外平移饼图的一部分以在鼠标悬停时突出显示它，然后 returns 它在鼠标移开时回到其原始位置：

           function setTranslation(p, slice) {
                p.sliced = slice;
                if (p.sliced) {
                    p.graphic.animate(p.slicedTranslation);
                } else {
                    p.graphic.animate({
                        translateX: 0,
                        translateY: 0});
                }
            }

我在点鼠标悬停和鼠标移出事件的 Highcharts 配置对象上调用它，如下所示：

    mouseOver: function () {
         setTranslation(this, true);
    },
    mouseOut: function () {
        setTranslation(this, false);
    }

它工作完美，除非 window 被调整大小，在我的应用程序中我认为用户不会调整它的大小，但我启用了导出并且在 Chrome 中弹出下载栏-up 并触发 window 调整大小，之后动画停止工作，翻译完成但不流畅，立即完成。

玩代码后我发现如果我有一个 window 调整大小事件处理程序 jQuery 抛出任何错误动画在调整大小后继续工作，页面的其余部分不会坏，所以我有这个补丁：

$(window).resize(function (e) {
     throw new Error("Intentional error")
});

我认为，当 window 调整大小时，graphic.animate 使用的某些参数发生更改并且它停止工作，并且当以某种方式抛出错误时，这种情况不会发生。我认为这是不正常的，故意抛出错误是不好的，但我不知道如何检查调整大小事件发生了什么变化。

Answer 1

您可以通过 mouseOver 和 mouseOut 事件重用内置切片功能，而不是手动处理带有翻译的切片，以防止任何边缘情况，例如您遇到的情况。

以下代码将在 mouseOver 上切片并删除 mouseOut 上的切片（JSFiddle）：

plotOptions: {
    pie: {
        point: {
            events: {
                mouseOver: function(event) {
                    this.slice(true);
                },
                mouseOut: function(event) {
                    this.slice(false);
                }
            }
        }
    }
}

这不受 window 调整大小的影响，而且非常整洁。

对于饼图，特别是每个切片是单个 Series 中的 Point，这就是为什么这些事件在 pie.point.events.

下

Highcharts饼图切片动画仅在抛出错误时有效

Highcharts pie chart slice animation only works when an error is thrown

javascript

jquery

animation

highcharts