我正在使用 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为空数组[]。
- 1 回答
- 0 关注
- 73 浏览
添加回答
举报
0/150
提交
取消