bootstrap.min.JS 是否与 chart.min,js 冲突？

Question

我正在为客户支持创建一个管理页面，并包含一个精美的图表以在主页上显示一些信息。 这很顺利，但是当我将选项卡窗格添加到页面并重新加载时，图表向下增长并导致页面继续滚动，仅在更改选项卡然后出现但更改 html 文件然后重新加载后才停止，然后重新开始。 图表标题（或图例？）也很混乱，只显示基本文本，没有 CSS 中指定的任何格式。 由于某种原因，我无法发布图像。 这很烦人，我想知道可能是什么原因造成的。 我只会发布我正在使用的所有脚本以及聊天代码。 我想知道这是否可能是由冲突的 JS 文件引起的。

    <html>
    <head></head>
    <body>
    
    <div class="col-lg-4 d-flex flex-grow">
                                <div class="row ">
                                  <div class="col-md-6 col-lg-12 grid-margin stretch-card">
                                    <div class="card bg-primary card-rounded">
                                      <div class="card-body pb-0">
                                        <h4 class="card-title card-title-dash text-white mb-4">Total Crops</h4>
                                        <div class="row">
                                          <div class="col-sm-4">
                                            <p class="status-summary-ight-white mb-1">For this month</p>
                                            <h2 class="text-info">20</h2>
                                          </div>
                                          <div class="col-sm-8">
                                            <div class="status-summary-chart-wrapper pb-4">
                                              <canvas id="status-summary"></canvas>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-md-6 col-lg-12 grid-margin stretch-card">
                                    <div class="card card-rounded">
                                      <div class="card-body">
                                        <div class="row">
                                          <div class="col-sm-6">
                                            <div class="d-flex justify-content-between align-items-center mb-2 mb-sm-0">
                                              <div class="circle-progress-width">
                                                <div id="noDisease" class="progressbar-js-circle pr-2"></div>
                                              </div>
                                              <div>
                                                <p class="text-small mb-2">No Diseases</p>
                                                <h4 class="mb-0 fw-bold">70%</h4>
                                              </div>
                                            </div>
                                          </div>
                                          <div class="col-sm-6">
                                            <div class="d-flex justify-content-between align-items-center">
                                              <div class="circle-progress-width">
                                                <div id="withDisease" class="progressbar-js-circle pr-2"></div>
                                              </div>
                                              <div>
                                                <p class="text-small mb-2">With Diseases</p>
                                                <h4 class="mb-0 fw-bold">30%</h4>
                                              </div>
                                            </div>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
        <script src="/template/vendors/chart.js/Chart.min.js"></script>
        <script src="/template/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
        <script src="/template/vendors/progressbar.js/progressbar.min.js"></script>
        <script src="https://code.jquery.com/jquery-migrate-1.4.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="/template/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="/template/assets/bootstrap/css/bootstrap.min.css"></script>
        <script src="/template/js/jquery.cookie.js" type="text/javascript"></script>
        <script src="/template/js/dashboard.js"></script>
        <script src="/template/js/Chart.roundedBarCharts.js"></script>

    </body>

Answer 1

我可以观察到您在脚本标签中使用了bootstrap css 文件，如下所示 -

<script src="/template/assets/bootstrap/css/bootstrap.min.css"></script>

我们不能在脚本标签中使用样式表，要加载样式表/ CSS，我们需要链接标签并在头标签中使用它-

<link href="/template/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

请将此用作样式表并使用link标签。 我希望它会开始工作。

请让我知道，以防我能进一步帮助你。 谢谢。

bootstrap.min.JS 是否与 chart.min,js 冲突？

问题描述

1 个解决方案

解决方案1
0 2022-06-25 19:12:05

bootstrap.min.JS 是否与 chart.min,js 冲突？

问题描述

1 个解决方案

解决方案1 0 2022-06-25 19:12:05

解决方案1
0 2022-06-25 19:12:05