Highcharts - Animationen andere als der Standard

Question

Gibt es eine Option in Highcharts JS ( highcharts.com ), um die Animation zu ändern, wenn ein Diagramm Lasten? Gerade jetzt, auf einem Säulendiagramm, schieben Sie die Spalten von unten nach oben. Ist es möglich, die Standard-Animation zu, sagen wir, bounce zu ändern?

Answer 1

Die Lade Animation kann die ‚Laden‘ Option gesteuert werden. Es definiert ein CSS-Objekt, das Sie können Thema. Sie können durch die Verwendung eines animierten Bildes als Hintergrund der Ladeanzeige animieren. http://highcharts.com/ref/#loading

Um den Text zu ändern, dass sie die lang Eigenschaft von Optionen zeigen über. Siehe http://highcharts.com/ref/#lang für mehr. Ich habe in der Regel nur um es leer.

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

Plus das CSS-Objekt anzuzeigen, müssen Sie chart.showLoading nennen ();

Answer 2

Sicher, zu Ihrem Diagramm Optionen hinzufügen, um die Animation Dauer und Lockerung Optionen. Zum Beispiel auf die Beine:

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

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

Answer 3

Es wurde unter „Reihe“ Objekt istead der Grafik bewegt

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

So etwas wie folgt aus:

    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

Ich sehe keinen Animationseffekt aus der Antwort Referenzierung die Geige:

Beispiel hier gesehen http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing /

versucht Auch erhöhten Werte wie hier: http://jsfiddle.net/p9EuZ/

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