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