Bootstrap 选项卡更改 Chart.js 默认动画

Question

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

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

duration: 0

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

cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js

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：

                   <script>
                        const labels2 = ["A", "B", "C"];

                        const config2 = {
                            type: 'bar',
                            data: {
                                labels: labels2,
                                datasets: [{
                                            label: '["AA", "BB" , "CC"]',
                                            data: [3400, 3614, 3843]
                                }]
                            }
                        };

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

                        
                    </script>