chartjs 从 ajax 加载数据无法正常工作

Question

我正在使用 ChartJs 尝试通过 ajax 调用用查询填充区域图，当我检查响应时 ajax 工作正常，但图表没有加载，我不知道为什么。有人可以告诉我我的问题是什么？我需要从数据库加载一些数据，并通过查询用这些信息制作图表。

我的 2 页是：

索引.php

<div class="card card-primary">

                <div class="card-header">

                  <h3 class="card-title">Area Chart</h3>

                  <div class="card-tools">

                    <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i>

                    </button>

                    <button type="button" class="btn btn-tool" data-card-widget="remove"><i

                        class="fas fa-times"></i></button>

                  </div>

                </div>

                <div class="card-body">

                  <div class="chart">

                    <canvas id="areaChart"

                      style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%;"></canvas>

                  </div>

                </div>

                <!-- /.card-body -->

              </div>

              <!-- /.card -->

            </div>

          </div>

        </section>

      </div>

    <!-- jQuery -->

    <script src="plugins/jquery/jquery.min.js"></script>

    <!-- Bootstrap 4 -->

    <script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- DataTables -->

    <script src="plugins/datatables/jquery.dataTables.js"></script>

    <script src="plugins/datatables-bs4/js/dataTables.bootstrap4.js"></script>

    <!-- AdminLTE App -->

    <script src="dist/js/adminlte.min.js"></script>

    <!-- ChartJS -->

    <script src="plugins/chart.js/Chart.min.js"></script>

    <!-- AdminLTE for demo purposes -->

    <script src="dist/js/demo.js"></script>

    <!-- page script -->

    <script>

    

Answer 1

尝试将您的 API 调用移动到单独的函数，并在成功响应后更新图表。...function updateChartAjax() {&nbsp;$.ajax({&nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; url: 'chart.php',&nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; success: function(data) {&nbsp; &nbsp; &nbsp; areaChart.data.datasets[0].data = data;&nbsp; &nbsp; &nbsp; // re-render the chart&nbsp; &nbsp; &nbsp; areaChart.update();&nbsp; &nbsp; }&nbsp; });}updateChartAjax();请务必将data属性设置areaChartData为空数组[]。