Highcharts - الرسوم المتحركة بخلاف الافتراضي

Question

هل هناك خيار في Highcharts JS (Highcharts.com) لتغيير الرسوم المتحركة عند تحميل المخطط؟ الآن ، على مخطط العمود ، تنزلق الأعمدة من أسفل. هل من الممكن تغيير الرسوم المتحركة الافتراضية ، على سبيل المثال ، ترتد؟

Answer 1

يمكن التحكم في الرسوم المتحركة تحميل باستخدام خيار "التحميل". إنه يحدد كائن 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 () ؛

Answer 2

بالتأكيد ، إلى خيارات الرسم البياني ، أضف مدة الرسوم المتحركة وخيارات التخفيف. على سبيل المثال ، للارتداد:

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

مثال هنا http://jsfiddle.net/gth/gquery/1.7.2/highslide-software/highcharts.com/tree/smaster/samples/highcharts/chart/animation-ise/

Answer 3

تم نقله تحت كائن "سلسلة" 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]
        ]
    }]

Answer 4

لا أرى أي تأثير للرسوم المتحركة من الإجابة التي تشير إلى الكمان:

مثال هنا http://jsfiddle.net/gth/gquery/1.7.2/highslide-software/highcharts.com/tree/smaster/samples/highcharts/chart/animation-ise/

حتى محاولة مرتفعة القيمة هنا:http://jsfiddle.net/p9euz/

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