chartjs 从 ajax 加载数据不能正常工作

Posted 2023-03-23

【中文标题】chartjs 从 ajax 加载数据不能正常工作

【英文标题】：chartjs loading data from ajax doesn't work fine

【发布时间】：2020-03-22 15:32:11

【问题描述】：

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

我的两页是：

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

【问题讨论】：

您的成功数据是什么样的？是 12 项的数组吗（对应于您的月数）？

我的回答是：["600.04","0","288.10","0","0","153.78","0","882.89","7.59"," 1537.89","0","0"]

在一个示例中，我看到了数据：[10,222,113,34,55,0,71,58,39,100,141,152]，它工作正常

【参考方案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();

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