javascript - 为什么我的 chart.js 图表失去了动画效果？

Question

我正在从 chart.js 制作图表。起初我可以在我的折线图和饼图中看到动画，但现在折线图没有显示它的动画，但我的饼图工作正常。

折线图/图表：

       <div class="middle">
            <div class="lineGraph">
                <canvas id="lineChart"></canvas>
                <script>
                    const CHART = document.getElementById("lineChart");
                    console.log(CHART);

                    let lineChart = new Chart(CHART, {
                        type: 'line',
                        data: {
                            labels: ["January", "Feburary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
                            datasets: [
                                {
                                    label: "Sales Trend",
                                    fill: false,
                                    lineTension: 0.1, 
                                    backgroundColor: "rgba(75, 192, 192, 0.4)",
                                    borderColor: "rgba(75, 192, 192, 1)",
                                    borderCapStyle: 'butt',
                                    borderDash: [],
                                    borderDashOffSet: 0.0,
                                    borderJoinStyle: 'miter',
                                    pointBorderColor: "rgba(75, 192, 192, 1)",
                                    pointBackgroundColor: "#fff",
                                    pointBorderWidth: 1,
                                    pointHoverRaduis: 5, 
                                    pointHoverBackgroundColor: "rgba(75, 192, 192,1)",
                                    pointHoverBorderColor: "rgba(220,220,220,1)",
                                    pointHoverBorderWidth: 2,
                                    pointRaduis: 1,
                                    pointHitRaduis: 10,
                                    data: [65, 59, 80, 81, 56, 55, 40, 36, 77, 21, 44, 60]  
                                }
                            ]
                        },
                        options:{
                            scales:{
                                yAxes:[{
                                    ticks:{
                                        beginAtZero: true
                                    }
                                }]
                            },
                            animation:{
                                duration: 4000,
                                easing: "linear"
                            }
                        }
                    }); 
                </script>
            </div>
            <div class="pieGraph">
                <canvas id="pieChart"></canvas>
                <script>
                    const chrt = document.getElementById("pieChart");
                    Chart.defaults.scale.ticks.beginAtZero = true;
                    console.log(chrt);

                    let pieChart = new Chart(chrt,{
                            type: 'pie',
                            data: {
                                labels: ['Male', 'Female'],
                                datasets: [
                                    {
                                        label: 'Points',
                                        backgroundColor:['#2980b9', '#ff4d4d'],
                                        data: [70, 30]
                                    }
                                ]
                            },
                            options:{
                                animation: {
                                    animateScale: true
                                }
                            }
                    });
                </script>    
        </div>

起初它没有动画选项，但我仍然可以动画。所以，我认为这是默认的。但显然它不再显示它的动画，这就是为什么我添加了动画选项但仍然没有看到动画。

标签： javascriptchart.js