在mouseout上的Highcharts饼图返回切片动画

时间:2013-05-21 12:14:08

标签: highcharts pie-chart mouseout

我正在Highcharts中实现一个动画饼图,其中切片在鼠标悬停时拔出,除了on mouseOut我希望切片返回到“关闭”的问题之外,一切都很好。位置。

这是动画的代码,我在mouseOut上有一个clearTimeout但是这不会将切片返回到原始位置。

图表是否有一种简单的方法可以达到原来的位置。

我这里有一个小提琴......

http://jsfiddle.net/rupertito/Y3wvN/1/

   pie: {
       allowPointSelect: true,
                        stickyTracking: false,

                        point: {
                        events: {
                                    legendItemClick: function() {

                                            return false;

                                    },
                                    mouseOver: function(event) {
                                        var point = this;

                                        if (!point.selected) {                                                          
                                            timeout = setTimeout(function () {
                                                point.firePointEvent('click');

                                                sectors.tooltip.refresh(point);
                                            }, 20);
                                        }
                                    }
                                }


                            },
                        events: {
                            mouseOut: function() {
                                clearTimeout(timeout);

                            },

                        },

希望这一切都有意义,并感谢您提前提供任何帮助。

干杯 罗布

1 个答案:

答案 0 :(得分:6)

这是错误报告here。这是关于不切实际的切片。还有一种解决方法可以避免这个问题。使用mouseOver / mouseOut的简单示例:http://jsfiddle.net/GqfU4/8/

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

和馅饼:

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