HighCharts - Animações que não sejam o padrão
-
25-09-2019 - |
Pergunta
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?
Solução
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 ();
Outras dicas
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/
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]
]
}]
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'
}
}