Highcharts饼图在mouseout上返回切片动画 [英] Highcharts Pie chart return slice animation on mouseout

问题描述

我在Highcharts中实现了一个动画饼图，其中切片在鼠标悬停时拉出，除了on mouseOut我希望切片返回到关闭位置外，一切都很好。

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

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

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

 饼图：{
 allowPointSelect：true，
 stickyTracking：false，
 
 point：{
事件：{
 legendItemClick：function（）{
 
 return false; 
 
}，
 mouseOver：function（event）{
 var point = this; 
 
 if（！point.selected）{
 timeout = setTimeout（function（）{
 point.firePointEvent（'click'）; 
 
 sector .tooltip.refresh（point）; 
}，20）; 
 
 
 
 
 $ b $ 
 $ {
 mouseOut：function（）{
 clearTimeout（超时）; 
 
}，
 
}，
  

希望这一切都是有道理的，并提前提供任何帮助。

欢呼
Rob

解决方案

这是这里报告的错误。这关乎的不是切点。还有解决方法是如何避免这个问题。对于使用mouseOver / mouseOut的简单示例： http://jsfiddle.net/GqfU4/8/

 函数setTranslation（p，slice）{
 p.sliced = slice; 
 if（p.sliced）{
 p.graphic.animate（p.slicedTranslation）; 
} else {
 p.graphic.animate（{
 translateX：0，
 translateY：0 
}）; 
} 
} 
  

另外一个饼图：

 点：{
 events：{
 mouseOut：function（）{
 setTranslation（this，false）; 
}，
 mouseOver：function（）{
 setTranslation（this，true）; 
} 
} 
}，
  

I am implementing an animated pie chart in Highcharts where the slices pull out on mouseover and all is good apart from a issue where the on mouseOut I want the slice to return to the 'closed' position.

This is the code for the animation and I have a clearTimeout on mouseOut however this is not returning the slice to the original position.

Is there an easy way of the chart to its original position.

I have a fiddle here...

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

                            },

                        },

Hope this all makes sense and thanks for any help in advance.

Cheers Rob

解决方案

This is bug reported here. It's about not working slice for point. There is also workaround how avoid that issue. And simple example for you with 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
        });
    } 
}

And for a pie:

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

这篇关于Highcharts饼图在mouseout上返回切片动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！