Highcharts - Chartanimation Schritt für Schritt

Question

Ist es möglich, Diagramme zu rendern und sie Schritt für Schritt zu animieren?

Im Moment habe ich drei Bereichsdatensätze in meinem Diagramm, die ich Schritt für Schritt animieren muss. Datensatz/Bereich 1 soll starten und danach muss Datensatz/Bereich 2 starten und dann 3.
Ich finde keine Option dafür, ist das mit Highcharts überhaupt möglich?

Im Moment geht die Animation von links nach rechts, oben - gibt es eine Option für eine Animationsrichtung? Ich möchte die Animation von der vollen Breite starten (vollständig erweitert auf der xAxis), um die yAxis zu verbessern.

Meine Optionen:

var $chart = $('#chart'); 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: $chart[0], 
     type: 'area', 
     style: { 
      fontFamily: 'Arial, sans-serif' 
     } 
    }, 
    legend: { 
     layout: 'vertical', 
     align: 'center', 
     verticalAlign: 'bottom', 
     itemMarginBottom: 15, 
     borderWidth: 0, 
     itemStyle: { 
      color: '#9a9a9a', 
      fontWeight: '300', 
      fontSize: '16px', 
      useHTML: true, 
     } 
    }, 
    title: false, 
    xAxis: { 
     categories: ['0', '5', '10', '15', '20', '25', '30'], 
     lineColor: '#9a9a9a', 
     minTickInterval: 5, 
     title: { 
      text: 'Years', 
      style: { 
       color: '#000', 
       fontSize: '14px', 
       fontWeight: 'bold' 
      } 
     }, 
     labels: { 
      style: { 
       color: '#9a9a9a', 
       fontSize: '14px' 
      } 
     } 
    }, 
    yAxis: { 
     min: 0, 
     tickAmount:5, 
     minorTickInterval: 0, 
     minorGridLineColor: '#9a9a9a', 
     gridLineWidth: 1, 
     maxPadding: 0.1, 
     title: { 
      text: 'Eur', 
      style: { 
       color: '#000', 
       fontSize: '14px', 
       fontWeight: 'bold' 
      } 
     }, 
     labels: { 
      format: '{value:,.0f}', 
      style: { 
       color: '#9a9a9a', 
       fontSize: '14px' 
      } 
     } 
    }, 
    tooltip: { 
    backgroundColor: '#FCFFC5' 
}, 
    plotOptions: { 
     series: { 
      borderWidth: 0, 
      pointPadding: 0.2, 
      groupPadding: 0, 
      style: { 
       color: '#000', 
       fontSize: '16px', 
       fontWeight: '300' 
      } 
     } 
    }, 
    series: [ 
     { 
      name: '2', 
      legendIndex: 2, 
      color: '#83bd3f', 
      animation: { 
       duration: 3000 
      }, 
      data: [1042, 
        2128, 
        3259, 
        4438, 
        5666, 
        6946, 
        7652 

       ] 
     }, 
     { 
      name: '1', 
      legendIndex: 1, 
      color: '#24356d', 
      animation: { 
       duration: 2000 
      }, 
      data: [1024,2073,3146, 
       4246, 
       5372, 
       6525, 
       7705 
      ] 

     }, 
     { 
      name: 'Eingezahlte Rate', 
      legendIndex: 0, 
      color: '#9a9a9a', 
      animation: { 
       duration: 1000 
      }, 
      data: [ 
       1000, 
       2000, 
       3000, 
       4000, 
       5000, 
       6000, 
       7000 
       ] 
     } 
    ] 
});` 

Dank

Answer 1

können Sie series.afterAnimate Ereignis verwenden, in dem Sie Animation für eine andere Serie abfeuern kann.

In Ihrem ersten Reihe gesetzt afterAnimate wie folgt aus:

events: { 
    afterAnimate: function() { 
    this.chart.get('1').update({ 
     visible: true, 
     animation: { 
     duration: 2000 
     }, 
     events: { 
     afterAnimate: function() { 
      this.chart.get('2').update({ 
      visible: true, 
      animation: { 
       duration: 3000 
      } 
      }) 
     } 
     } 
    }) 
    } 
}, 

Für die anderen Serien, zunächst können Sie deaktivieren Animation oder/und setzen ihre Sichtbarkeit auf false:

series: [{ 
    name: '2', 
    id: '2', 
    legendIndex: 2, 
    color: '#83bd3f', 
    animation: { 
    duration: 0 
    }, 
    visible: false, 

die Richtung zu ändern, von der Animation müssen Sie series.animate Methode wickeln und ändern, wie der Ausschnittrect animiert wird.

(function(H) { 
    H.wrap(H.seriesTypes.area.prototype, 'animate', function(proceed, init) { 
    var series = this, 
     chart = series.chart, 
     clipRect, 
     animation = H.animObject(series.options.animation), 
     sharedClipKey, 
     newH; 

    if (init) { 
     return proceed.apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else { 

     sharedClipKey = this.sharedClipKey; 
     clipRect = chart[sharedClipKey]; 
     if (clipRect) { 
     clipRect.attr({ 
      y: chart.plotSizeY, 
      height: 0, 
      width: chart.plotSizeX 
     }).animate({ 
      y: 0, 
      height: chart.plotSizeY 
     }, animation); 
     } 
     if (chart[sharedClipKey + 'm']) { 
     chart[sharedClipKey + 'm'].attr({ 
      y: chart.plotSizeY, 
      height: 0, 
      width: chart.plotSizeX + 99 
     }).animate({ 
      y: 0, 
      height: chart.plotSizeY 
     }, animation); 
     } 

     // Delete this function to allow it only once 
     series.animate = null; 
    } 

    }); 
})(Highcharts) 

Beispiel: http://jsfiddle.net/0esjvmgL/