Вимкніть анімацію за допомогою Charts.js


78

У мене виникають проблеми з вимкненням анімації з charts.js.

Це мій код:

var pieData = [
    {
        value: 30,
        color:"#F38630"
    },
    {
        value : 50,
        color : "#E0E4CC"
    },
    {
        value : 100,
        color : "#69D2E7"
    }    
];

var myPie = new Chart(document.getElementById("canvas").getContext("2d")).Pie(pieData);

Хто-небудь може навести приклад?

Відповіді:


94
options: {
    animation: {
        duration: 0
    }
}

6
Набагато чистіший підхід до ІМО, ніж недокументований animation: falseфокус. Установка durationв 0кадрах дозволяє використовувати функцію options.animation.onComplete()зворотного виклику для призначених для користувача малюнків на графіку, коли рендеринг закінчений.
Frosty Z

82
var pieData = [{
    value: 30,
    color: "#F38630"
}, 
{
    value: 50,
    color: "#E0E4CC"
}, 
{
    value: 100,
    color: "#69D2E7"
}];

var pieOptions = {
    animation: false
};

var ctx = document.getElementById("canvas").getContext("2d");
var myPie = new Chart(ctx).Pie(pieData, pieOptions);

Це має спрацювати;)


6
Де options.animationвказано в документації? Жоден із chartjs.org/docs/latest/general/options.html та chartjs.org/docs/latest/configuration/animations.html не згадує про логічнуanimation властивість.
Dai

2
@Dai Не порівнюйте відповідь 4 років із поточною документацією.
Skrzypek

3
але ваша відповідь працює з поточними версіями ChartJS, ось чому я дав вам голос за.
Дай

14

Спробуйте це:

options: {
    animation: {
        duration: 0, // general animation time
    },
    hover: {
        animationDuration: 0, // duration of animations when hovering an item
    },
    responsiveAnimationDuration: 0, // animation duration after a resize
}

9

Щоб запобігти прочитанню всієї прийнятої відповіді, яка відповідає на цей конкретний приклад, щоб вимкнути анімацію в js діаграми:

Передати об'єкт в параметрах при ініціалізації конкретного типу діаграми і використовувати наступну пару ключ / значення: animation: false. напрmyChart.Bar(myCanvas, {animation:false});


8

Привіт, наступні 3 варіанти працюють для відключення анімації

1) Вимкнути анімацію:

var myLine = Chart.Line(ctx, {
        data: lineChartData,
        options: {
           animation: false,
         }
        });

2) Зменшіть тривалість анімації на 0

var myLine = Chart.Line(ctx, {
        data: lineChartData,
        options: {   
            animation: {
                duration: 0,
            },
         });

3) Глобальний варіант:

 Chart.defaults.global.animation = false;
    var myLine = Chart.Line(ctx, {
        data: lineChartData,
        options: {
         }
       });




4

Відповідно до документів ( https://www.chartjs.org/docs/latest/general/performance.html#disable-animations ) ось спосіб повністю вимкнути анімацію:

new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        animation: {
            duration: 0 // general animation time
        },
        hover: {
            animationDuration: 0 // duration of animations when hovering an item
        },
        responsiveAnimationDuration: 0 // animation duration after a resize
    }
});
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.