Program Tip

Charts.js로 애니메이션 비활성화

programtip 2020. 12. 6. 21:59
반응형

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

누구든지 예를 들어 줄 수 있습니까?


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

작동합니다;)


options: {
    animation: {
        duration: 0
    }
}

특정 예제에 대한 답변을 모두 읽지 않도록하려면 차트 js에서 애니메이션을 비활성화합니다.

특정 차트 유형을 초기화 할 때 옵션에 개체를 전달하고 다음 키 / 값 쌍을 사용합니다 animation: false.. 예 :myChart.Bar(myCanvas, {animation:false});


안녕하세요 다음 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: {
         }
       });

이 시도:

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

이 작업은 전역 적으로 수행 할 수도 있습니다.

Chart.defaults.global.animation.duration = 0

통해 : https://www.chartjs.org/docs/latest/configuration/animations.html#animation-configuration


이것은 트릭을 수행해야합니다.

    chartOption = {
        animation:{
            duration: 0
        }
    }

options{
    animation: false
}

참고 URL : https://stackoverflow.com/questions/21389341/disable-animation-with-charts-js

반응형