ChartJS Bootstrap选项卡更改图表,js默认动画

8zzbczxx 于 2023-04-30 发布在 Chart.js

关注(0)|答案(1)|浏览(145)

我有两张图表。js（v5.3.0-alpha 1）条形图，按预期显示在单个页面上。默认的动画将两个图表从底部滑动到顶部，正如您所期望的那样。我试图把他们在一个Bootstrap标签设置与一个图表在每个标签。图表工作正常，但第二个选项卡中图表的默认幻灯片动画发生了变化，条形图从左上角滑入。
有谁知道我为什么和如何改变它吗？到目前为止，我所尝试的一切都不起作用。我可以用duration: 0禁用动画，但我不想这么做。我还将两个选项卡都设置为活动，这可以正常工作，但导致第二个图表显示在选项卡之外。

cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js
cdn.jsdelivr.net/npm/chart.js/dist/chart.umd.min.js

引导选项卡：

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

chart.js

来源：https://stackoverflow.com/questions/75871386/bootstrap-tabs-change-chart-js-default-animation

1条答案

按热度按时间

eiee3dmh1#

您可以尝试更改动画配置，如下所示：

options: {
  animations: {
    numbers: {
      type: 'number',
      properties: ['base', 'y', 'height'],
      from: ({chart}) => chart.chartArea.bottom
    },
  }
  ...
}

const labels2 = ["A", "B", "C"];

const config2 = {
  type: 'bar',
  data: {
    labels: labels2,
    datasets: [{
      label: 'ds',
      data: [3400, 3614, 3843]
    }]
  },
  options: {
    animations: {
      numbers: {
        type: 'number',
        properties: ['base', 'y', 'height'],
        from: ({chart}) => chart.chartArea.bottom
      },
    }
  }
};

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

.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"></script> 
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

赞(0）回复(0）举报 2023-04-30

我来回答

ChartJS Bootstrap选项卡更改图表,js默认动画

1条答案

相关问题

热门标签

最新问答