我正在使用 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 關注
- 100 瀏覽
添加回答
舉報
0/150
提交
取消