javascript - Highcharts饼图切片动画仅在抛出错误时起作用

Question

我有一个函数，可以将饼图的切片从中心径向向外平移，以在鼠标悬停时突出显示它，然后在鼠标移开时将其返回到其原始位置:

           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);
    }

它工作得很好，除非调整窗口大小，在我的应用程序上我认为用户不会调整它的大小，但我启用了导出，并且在 Chrome 中会弹出下载栏并触发窗口调整大小，之后动画停止工作，翻译完成，但不顺利，立即完成。

在玩完代码后，我发现如果我有一个带有 jQ​​uery 的窗口调整大小事件处理程序，它会抛出任何错误，则动画在调整大小后会继续工作，并且页面的其余部分不会中断，所以我有这个补丁:

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

我认为，当调整窗口大小时，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);
                }
            }
        }
    }
}

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

对于饼图来说，具体而言，每个切片都是单个Series中的一个Point，这就是为什么这些事件位于pie.point.events下.