Highcharts - animazioni diverse da quella di default

Question

C'è un'opzione in Highcharts JS ( highcharts.com ) per modificare l'animazione quando un grafico carichi? In questo momento, su un grafico di colonna, le colonne scorrono dal fondo. E 'possibile modificare l'animazione di default, per esempio, di rimbalzo?

Answer 1

L'animazione di carico può essere controllato tramite l'opzione 'carico'. Si definisce un oggetto CSS che è possibile tema. È possibile animato la visualizzazione di carico utilizzando un'immagine animata come sfondo. http://highcharts.com/ref/#loading

Per modificare il testo che viene visualizzato tramite la proprietà lang di opzioni. Vedere http://highcharts.com/ref/#lang di più. Io di solito basta impostato a vuoto.

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

Inoltre per visualizzare l'oggetto CSS, è necessario chiamare chart.showLoading ();

Answer 2

Certo, al grafico opzioni aggiungere la durata dell'animazione e opzioni di andamento. Ad esempio, a rimbalzare:

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

Esempio visto qui http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/

Answer 3

È stato spostato in "serie" oggetto istead di grafico

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

Qualcosa di simile a questo:

    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

Non vedo alcun effetto di animazione dalla risposta fa riferimento il violino:

Esempio visto qui http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing /

Anche cercando elevato valore come qui: http://jsfiddle.net/p9EuZ/

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