Highcharts - animations autres que la valeur par défaut

Question

Y at-il de changer l'animation quand une charge graphique une option Highcharts JS ( highcharts.com )? En ce moment, sur un graphique à colonnes, les colonnes glisser vers le haut du bas. Est-il possible de modifier l'animation par défaut, par exemple, rebondir?

Answer 1

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

Pour modifier le texte qu'il affiche via la propriété lang d'options. Voir http://highcharts.com/ref/#lang plus. D'habitude, je mets juste à 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 graphique ajouter la durée de l'animation et des options d'assouplissement. 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

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]
        ]
    }]

Answer 4

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 valeur élevée comme ici: http://jsfiddle.net/p9EuZ/

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