Question

我正在使用chart.js来显示一些图形，我想在甜甜圈动画开始之前插入延迟。

有人可以帮我解决这个问题吗？

提前致谢。西尔

Answer 1

<html>
<head>
    <title>Doughnut Chart</title>
    <script src="../Chart.js"></script>
    <meta name = "viewport" content = "initial-scale = 1, user-scalable = no">

</head>
<body>
    <canvas id="canvas" height="450" width="450"></canvas>


<script>

    var doughnutData = [
            {
                value: 30,
                color:"#F7464A"
            },
            {
                value : 50,
                color : "#46BFBD"
            },
            {
                value : 100,
                color : "#FDB45C"
            },
            {
                value : 40,
                color : "#949FB1"
            },
            {
                value : 120,
                color : "#4D5360"
            }

        ];

    //this part will add 2s delay on page load for chart
    window.onload=function(){
        setTimeout(function() {
            var myDoughnut = new Chart(document.getElementById("canvas").getContext("2d")).Doughnut(doughnutData);
        }, 2000);
    };

</script>
</body>

Answer 2

2019年答案：您可以这样设置延迟时间

import { ChartOptions } from 'chart.js';
public barChartOptions: ChartOptions = {
  animation: {
    duration: 2000
  }
};

我希望它可以帮助某人！更多信息：https://www.chartjs.org/docs/latest/configuration/animations.html#animation-configuration

Answer 3

看起来没有人发布答案。在版本 3+ 中，如下所示：

options: {
  animation: {
    delay: 1000, // change delay to suit your needs.
  },
}

在chart.js动画的开头添加延迟

3 个答案: