HighCharts - Animações que não sejam o padrão

Question

Existe uma opção em HighCharts JS (HighCharts.com) para alterar a animação quando um gráfico carrega? No momento, em um gráfico de colunas, as colunas deslizam para cima da parte inferior. É possível alterar a animação padrão para, digamos, saltar?

Answer 1

A animação de carregamento pode ser controlada usando a opção 'carregamento'. Ele define um objeto CSS que você pode tema. Você pode animar a tela de carregamento usando uma imagem animada como plano de fundo. http://highcharts.com/ref/#loading

Para alterar o texto que ele é exibido através da propriedade Lang das opções. Ver http://highcharts.com/ref/#lang para mais. Eu costumava definir como em branco.

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

Além disso, para exibir o objeto CSS, você precisa chamar Chart.ShowLoading ();

Answer 2

Claro, às suas opções de gráfico, adicione a duração da animação e as opções de flexibilização. Por exemplo, para saltar:

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

Exemplo visto aqui http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-ingeing/

Answer 3

Foi movido sob o objeto "série" do gráfico

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

Algo assim:

    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

Não vejo nenhum efeito de animação da resposta referenciando o violino:

Exemplo visto aqui http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-ingeing/

Mesmo tentando o valor elevado como aqui:http://jsfiddle.net/p9euz/

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