【问题标题】:Highcharts Pie chart return slice animation on mouseoutHighcharts饼图在鼠标悬停时返回切片动画
【发布时间】:2013-05-21 20:52:26
【问题描述】:

我正在 Highcharts 中实现一个动画饼图,其中切片在鼠标悬停时拉出,除了在 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);

                            },

                        },

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

干杯 抢

【问题讨论】:

    标签: highcharts pie-chart mouseout


    【解决方案1】:

    这是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);
                        }
                    }
                },
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2016-07-23
      • 2012-05-04
      • 2021-11-13
      • 2011-12-12
      相关资源
      最近更新 更多