2013-05-21 3 views
0

Я реализую анимированную круговую диаграмму в Highcharts, где кусочки вытаскивают мышью, и все хорошо, кроме проблемы, когда на мыши. Я хочу, чтобы ломтик возвращался в «закрытый» должность.Highcharts Круговая диаграмма возвращает анимацию среза на mouseout

Это код для анимации, и у меня есть clearTimeout на mouseOut, однако это не возвращает срез в исходное положение.

Есть ли простой способ нахождения диаграммы в исходное положение.

У меня есть скрипка здесь ...

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

          }, 

         }, 

Надеется, что это все имеет смысл и спасибо за любую помощь заранее.

Приветствия Rob

ответ

5

Это ошибка сообщила 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); 
        } 
       } 
      },