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

Question

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

我的2页是：

index.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>
      $(document).ready(function () {

        // Get context with jQuery - using jQuery's .get() method.
        var areaChartCanvas = $('#areaChart').get(0).getContext('2d')

        var areaChartData = {
          labels: ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno', 'Luglio', 'Agosto', 'Settembre',
            'Ottobre', 'Novembre', 'Dicembre'
          ],
          datasets: [{
            label: 'Digital Goods',
            backgroundColor: 'rgba(60,141,188,0.9)',
            borderColor: 'rgba(60,141,188,0.8)',
            pointRadius: false,
            pointColor: '#3b8bba',
            pointStrokeColor: 'rgba(60,141,188,1)',
            pointHighlightFill: '#fff',
            pointHighlightStroke: 'rgba(60,141,188,1)',
            data: $.ajax({
              type: 'POST',
              url: 'chart.php',
              dataType: 'json', //tell jQuery to parse received data as JSON before passing it onto successCallback
              success: function (data) {
                return data;
              }
            })
          }]
        }

        var areaChartOptions = {
          maintainAspectRatio: false,
          responsive: true,
          legend: {
            display: false
          },
          scales: {
            xAxes: [{
              gridLines: {
                display: false,
              }
            }],
            yAxes: [{
              gridLines: {
                display: false,
              }
            }]
          }
        }

        // This will get the first returned node in the jQuery collection.
        var areaChart = new Chart(areaChartCanvas, {
          type: 'line',
          data: areaChartData,
          options: areaChartOptions
        })
      })
    </script>

chart.php

<?php
require "connection.php";
//print_r($_POST);exit;
$data= array();
$sql="SELECT SUM(prezzo*qty) somma, MONTH(data) mese FROM `vendite` WHERE data BETWEEN '2019-01-01' AND '2019-12-31' GROUP BY MONTH(data)";
for($i=0;$i<12;$i++) $data[]="0";
$ris = $db1->query($sql);
if ( $ris->num_rows > 0 ) {
    while ( $riga = $ris->fetch_assoc()) { 
        $data[$riga['mese']-1]=$riga['somma'];

    }
}
echo json_encode($data);

Answer 1

尝试将您的API调用移至单独的函数，并在成功响应后更新图表。

...

function updateChartAjax() {
 $.ajax({
    type: 'POST',
    url: 'chart.php',
    dataType: 'json',
    success: function(data) {
      areaChart.data.datasets[0].data = data;

      // re-render the chart
      areaChart.update();
    }
  });
}

updateChartAjax();

请确保将data中的areaChartData属性设置为空数组[]。