Javascript 使用Charts.js禁用动画

Javascript 使用Charts.js禁用动画,javascript,charts,Javascript,Charts,使用charts.js关闭动画时遇到问题 这是我的代码: 有人能举个例子吗 var pieData = [{ value: 30, color: "#F38630" }, { value: 50, color: "#E0E4CC" }, { value: 100, color: "#69D2E7" }]; var pieOptions = { animation: false }; var ctx = document.getEl

使用charts.js关闭动画时遇到问题

这是我的代码:

有人能举个例子吗

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

这应该行得通;)

要防止阅读回答该特定示例的所有已接受答案,请禁用图表js中的动画:


初始化特定图表类型时,在选项中传递对象,并使用以下键/值对:
动画:false
。e、 g.
myChart.Bar(myCanvas,{animation:false})

这应该可以做到:

    chartOption = {
        animation:{
            duration: 0
        }
    }

Hi以下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

Via:

根据文档()这里是完全禁用动画的方法:

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

文档中列出的
options.animation
在哪里?两者都不是,并且提到布尔“
动画”
”属性。@Dai不要将4年前的答案与当前文档进行比较。但是你的答案与当前版本的ChartJS有效,这就是为什么我给你一个向上投票的原因。这种方法比未记录的
动画:false
技巧更简洁。将
duration
设置为
0
stills允许在渲染完成后,对图表上的自定义图形使用
选项.animation.onComplete()
回调。
 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
}
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
    }
});