Highcharts - الرسوم المتحركة بخلاف الافتراضي
-
25-09-2019 - |
سؤال
هل هناك خيار في Highcharts JS (Highcharts.com) لتغيير الرسوم المتحركة عند تحميل المخطط؟ الآن ، على مخطط العمود ، تنزلق الأعمدة من أسفل. هل من الممكن تغيير الرسوم المتحركة الافتراضية ، على سبيل المثال ، ترتد؟
المحلول
يمكن التحكم في الرسوم المتحركة تحميل باستخدام خيار "التحميل". إنه يحدد كائن CSS الذي يمكنك موضوعه. يمكنك تحريك شاشة التحميل باستخدام صورة متحركة كخلفية. http://highcharts.com/ref/#loading
لتغيير النص الذي يعرضه عبر خاصية Lang للخيارات. يرى http://highcharts.com/ref/#lang للمزيد من. أنا عادة فقط ضبطها على فارغ.
var options = {
style: { background: 'url(/images/3044/chart_curve.png) no-repeat center' },
lang: { loading: '' }
};
var chart = new Highcharts.Chart(options);
بالإضافة إلى عرض كائن CSS ، تحتاج إلى استدعاء chart.showloading () ؛
نصائح أخرى
بالتأكيد ، إلى خيارات الرسم البياني ، أضف مدة الرسوم المتحركة وخيارات التخفيف. على سبيل المثال ، للارتداد:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
animation: {
duration: 1500,
easing: 'easeOutBounce'
}
},
...
});
تم نقله تحت كائن "سلسلة" Istead من الرسم البياني
http://api.highcharts.com/highstock#plotoptions.series
شيء من هذا القبيل:
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]
]
}]
لا أرى أي تأثير للرسوم المتحركة من الإجابة التي تشير إلى الكمان:
حتى محاولة مرتفعة القيمة هنا:http://jsfiddle.net/p9euz/
chart: {
animation: {
duration: 6222500,
easing: 'easeOutBounce'
}
}