Pregunta

¿Hay una opción en Highcharts JS ( highcharts.com ) para cambiar la animación cuando una tabla de cargas? 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 por defecto a, por ejemplo, de rebote?

¿Fue útil?

Solución

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

Para cambiar el texto que se muestra a través de la propiedad lang de opciones. Ver http://highcharts.com/ref/#lang por más. Normalmente yo sólo puse a blanco.

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

Plus para mostrar el objeto CSS, es necesario llamar a chart.showLoading ();

Otros consejos

Por supuesto, a su gráfico opciones de añadir la duración de la animación y las opciones de flexibilización. Por ejemplo, para 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/

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

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

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

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

    chart: {
        animation: {
            duration: 6222500,
            easing: 'easeOutBounce'
        }
    }
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top