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

【问题标题】：chartjs loading data from ajax doesn't work finechartjs 从 ajax 加载数据不能正常工作
【发布时间】：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]，它工作正常

标签： javascript php sql ajax chart.js

【解决方案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 属性设置为空数组[]。

【讨论】：