Highcharts: animaciones distintas del predeterminado

Question

¿Hay alguna opción en Highcharts JS (highcharts.com) para cambiar la animación cuando se carga un gráfico? En este momento, en un gráfico de columnas, las columnas se deslizan hacia arriba desde la parte inferior. ¿Es posible alterar la animación predeterminada para, por ejemplo, rebotar?

Answer 1

La animación de carga se puede controlar utilizando la opción 'cargar'. Define un objeto CSS que puedes tema. Puede animar la pantalla de carga utilizando una imagen animada como fondo. http://highcharts.com/ref/#loading

Para cambiar el texto que se muestra mediante la propiedad lang de las opciones. Ver http://highcharts.com/ref/#lang para más. Normalmente lo pongo en blanco.

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

Además de mostrar el objeto CSS, debe llamar a chart.showLoading();

Answer 2

Seguro, a las opciones de gráfico agregue la duración de la animación y las opciones de aceleración. Por ejemplo, para hacer rebotar:

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

Ejemplo ve aquí http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/

Answer 3

no veo ningún efecto de animación a partir de la respuesta hace referencia al violín:

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

Incluso tratando de obtener un valor elevado como aquí: http://jsfiddle.net/p9EuZ/

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

Answer 4

Se trasladó en "serie" Istead objeto de gráfico

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

Algo como esto:

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