Highcharts - animazioni diverse da quella di default
-
25-09-2019 - |
Domanda
C'è un'opzione in Highcharts JS ( highcharts.com ) per modificare l'animazione quando un grafico carichi? In questo momento, su un grafico di colonna, le colonne scorrono dal fondo. E 'possibile modificare l'animazione di default, per esempio, di rimbalzo?
Soluzione
L'animazione di carico può essere controllato tramite l'opzione 'carico'. Si definisce un oggetto CSS che è possibile tema. È possibile animato la visualizzazione di carico utilizzando un'immagine animata come sfondo. http://highcharts.com/ref/#loading
Per modificare il testo che viene visualizzato tramite la proprietà lang di opzioni. Vedere http://highcharts.com/ref/#lang di più. Io di solito basta impostato a vuoto.
var options = {
style: { background: 'url(/images/3044/chart_curve.png) no-repeat center' },
lang: { loading: '' }
};
var chart = new Highcharts.Chart(options);
Inoltre per visualizzare l'oggetto CSS, è necessario chiamare chart.showLoading ();
Altri suggerimenti
Certo, al grafico opzioni aggiungere la durata dell'animazione e opzioni di andamento. Ad esempio, a rimbalzare:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: {
duration: 1500,
easing: 'easeOutBounce'
}
},
...
});
Esempio visto qui http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing/
È stato spostato in "serie" oggetto istead di grafico
http://api.highcharts.com/highstock#plotOptions.series
Qualcosa di simile a questo:
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]
]
}]
Non vedo alcun effetto di animazione dalla risposta fa riferimento il violino:
Esempio visto qui http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing /
Anche cercando elevato valore come qui: http://jsfiddle.net/p9EuZ/
chart: {
animation: {
duration: 6222500,
easing: 'easeOutBounce'
}
}