chartjs 从 ajax 加载数据不能正常工作
Posted
技术标签:
【中文标题】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
属性设置为空数组[]
。
【讨论】:
以上是关于chartjs 从 ajax 加载数据不能正常工作的主要内容,如果未能解决你的问题,请参考以下文章
使用 ajax json 加载数据后,引导数据表无法正常工作
将chartjs的php sql值检索到jquery/ajax中
[转]IE9.0或者360下js(JavaScriptjQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(jsonstring)无法获(代