Highcharts - Animationen andere als der Standard
-
25-09-2019 - |
Frage
Gibt es eine Option in Highcharts JS ( highcharts.com ), um die Animation zu ändern, wenn ein Diagramm Lasten? Gerade jetzt, auf einem Säulendiagramm, schieben Sie die Spalten von unten nach oben. Ist es möglich, die Standard-Animation zu, sagen wir, bounce zu ändern?
Lösung
Die Lade Animation kann die ‚Laden‘ Option gesteuert werden. Es definiert ein CSS-Objekt, das Sie können Thema. Sie können durch die Verwendung eines animierten Bildes als Hintergrund der Ladeanzeige animieren. http://highcharts.com/ref/#loading
Um den Text zu ändern, dass sie die lang Eigenschaft von Optionen zeigen über. Siehe http://highcharts.com/ref/#lang für mehr. Ich habe in der Regel nur um es leer.
var options = {
style: { background: 'url(/images/3044/chart_curve.png) no-repeat center' },
lang: { loading: '' }
};
var chart = new Highcharts.Chart(options);
Plus das CSS-Objekt anzuzeigen, müssen Sie chart.showLoading nennen ();
Andere Tipps
Sicher, zu Ihrem Diagramm Optionen hinzufügen, um die Animation Dauer und Lockerung Optionen. Zum Beispiel auf die Beine:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: {
duration: 1500,
easing: 'easeOutBounce'
}
},
...
});
Es wurde unter „Reihe“ Objekt istead der Grafik bewegt
http://api.highcharts.com/highstock#plotOptions.series
So etwas wie folgt aus:
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]
]
}]
Ich sehe keinen Animationseffekt aus der Antwort Referenzierung die Geige:
Beispiel hier gesehen http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/animation-easing /
versucht Auch erhöhten Werte wie hier: http://jsfiddle.net/p9EuZ/
chart: {
animation: {
duration: 6222500,
easing: 'easeOutBounce'
}
}