Bootstrap 更改 Chart.js 动画

Question

我有两个 Chart.js (v5) 条形图，它们按预期显示在单个页面上。默认动画会按照您的预期将两个图表从底部滑动到顶部。我试图将它们放入 Bootstrap 选项卡设置中，每个选项卡中有一个图表。图表工作正常，但第二个选项卡中图表的默认动画幻灯片发生变化，条形图从左上角滑入。

有人知道为什么以及如何改变它吗？到目前为止我尝试过的一切都不起作用。我可以使用

duration: 0

禁用动画，但不想那样做。我还将两个选项卡都设置为活动状态，这有效但导致第二个图表显示在选项卡之外。

Bootstrap 选项卡：

            <nav>
                <div class="nav nav-tabs bg-light" id="nav-tab" role="tablist">
                    <a class="nav-link active fw-semibold" id="nav-home-tab" data-bs-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Tab 1</a>
                    <a class="nav-link fw-semibold" id="nav-profile-tab" data-bs-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Tab 2</a>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                    <div class="chartBox">
                        <canvas id="barchart"></canvas>
                </div>
                <div class="tab-pane" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                    <div class="chartBox">
                        <canvas id="bar_exp_chart"></canvas>
                    </div>
                </div>
            </div>

JavaScript：

               const labels2 = {{ ss_expense_data[0] }};

                // config 
                const config2 = {
                    type: 'bar',
                    data: 
                            {% for x in range(0, ss_expense_data[1]|length) %}

                                {
                                    label: '{{ ss_expense_data[3][x] }}',
                                    data: {{ ss_expense_data[1][x] }},
                                    backgroundColor: [ '{{ chart_colors[x] }}' ],
                                    borderColor: [ '{{ chart_colors[x] }}' ],
                                    borderWidth: 0
                                },
                            
                            {% endfor %}

                        ]
                    }
                };

                const barexpensechart = new Chart(
                    document.getElementById('bar_exp_chart'),
                    config2
                );

                
            </script>