Images actives - animations autres que la valeur par défaut

Question

Existe-t-il une option dans Highcharts JS (highcharts.com) pour modifier l'animation lors du chargement d'un graphique? À l'heure actuelle, sur un graphique à colonnes, les colonnes glissent du bas vers le haut. Est-il possible de modifier l'animation par défaut pour, disons, rebondir?

Answer 1

L'animation de chargement peut être contrôlée à l'aide de l'option 'chargement'. Il définit un objet CSS que vous pouvez thème. Vous pouvez animer l'affichage de chargement en utilisant une image animée comme arrière-plan. http://highcharts.com/ref/#loading

Pour modifier le texte affiché via la propriété lang des options. Voir http://highcharts.com/ref/#lang pour plus. Habituellement, je viens de le mettre en blanc.

var options = { 
    style: { background: 'url(/images/3044/chart_curve.png) no-repeat center' }, 
    lang: { loading: '' } 
}; 
var chart = new Highcharts.Chart(options); 

Plus pour afficher l'objet CSS, vous devez appeler chart.showLoading();

Answer 2

Bien sûr, à vos options de graphique ajouter la durée de l'animation et les options d'accélération. Par exemple, pour rebondir:

var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     animation: { 
      duration: 1500, 
      easing: 'easeOutBounce' 
     } 
    }, 
    ... 
}); 

Exemple vu ici http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/

Answer 3

Je ne vois pas d'effet d'animation de la réponse faisant référence au violon:

Exemple vu ici http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/

Même en essayant la valeur élevée comme ici: http://jsfiddle.net/p9EuZ/

chart: { 
     animation: { 
      duration: 6222500, 
      easing: 'easeOutBounce' 
     } 
    } 

Answer 4

Il a été déplacé sous istead objet "série" de tableau

http://api.highcharts.com/highstock#plotOptions.series

Quelque chose comme ceci:

series: [{ 
     animation:{ 
      duration: 10000 
     }, 
     type: 'pie', 
     name: 'Percentuale per periodo', 
     data: [ 
      ['2 anni', 13.0], 
      ['3 anni',  41], 
      ['4 anni', 17], 
      ['5 anni',  17], 
      ['7 anni', 4], 
      ['8 anni', 8] 
     ] 
    }]