为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

PHP
神不在的星期二 2022-11-12 13:25:48
我正在使用 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>    
查看完整描述

1 回答

?
幕布斯7119047

TA贡献1794条经验 获得超8个赞

尝试将您的 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为空数组[]。


查看完整回答
反对 回复 2022-11-12
  • 1 回答
  • 0 关注
  • 73 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信