web-dev-qa-db-ja.com

Charts.jsでアニメーションを無効にする

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);

誰でも例を提供できますか？

javascriptcharts
58
Cronner
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);

それは動作するはずです;）

73
Skrzypek
options: {
    animation: {
        duration: 0
    }
}
62
palermuke

チャートjsでアニメーションを無効にするには、その特定の例に答える受け入れられた答えがすべて読まれないようにするには：

特定のチャートタイプを初期化するときにオプションにオブジェクトを渡し、次のキー/値ペアを使用します：_animation: false_。例えばmyChart.Bar(myCanvas, {animation:false});

8
user3791372

これを試して：

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

こんにちは次の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
Krishnamoorthy Acharya

これはトリックを行う必要があります：

    chartOption = {
        animation:{
            duration: 0
        }
    }
4
Rishabh Sharma

これはグローバルに行うこともできます。

Chart.defaults.global.animation.duration = 0

経由： https://www.chartjs.org/docs/latest/configuration/animations.html#animation-configuration

4
BBlackwo
options{
    animation: false
}
3
Bibimission