條形圖，chart.js PHP不會加載

我有一個條形圖，我試圖用chart.js創建一個PHP數組並通過ajax加載。我能夠加載使用AJAX（在控制檯驗證）的數據，但我不能在圖中獲取數據 - 在這裏是在控制檯中的數據：條形圖，chart.js PHP不會加載

我還沒有收到任何錯誤消息，以便我現在很困惑。這裏是所有的代碼：

HTML

<?php 
include 'connect.php'; 
?> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 

</head> 

<body> 

</canvas><canvas id="myChart"></canvas> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="javascript/charts.js" type="text/javascript"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script> 

</body>

$(document).ready(function(){ 
 
\t $.ajax({ 
 
\t \t url: "prod_agg.php", 
 
\t \t method: "GET", 
 
\t \t success: function(data) { 
 
\t \t \t console.log(data); 
 
\t \t \t var date = []; 
 
      var output = []; 
 

 
\t \t \t for(var i in data) { 
 
\t \t \t \t date.push(data[i].date); 
 
\t \t \t \t output.push(data[i].output); 
 
\t \t \t } 
 

 
\t \t \t var chartdata = { 
 
\t \t \t \t labels: date, 
 
\t \t \t \t datasets : [ 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t label: 'Date', 
 
\t \t \t \t \t \t backgroundColor: 'rgba(200, 200, 200, 0.75)', 
 
\t \t \t \t \t \t borderColor: 'rgba(200, 200, 200, 0.75)', 
 
\t \t \t \t \t \t hoverBackgroundColor: 'rgba(200, 200, 200, 1)', 
 
\t \t \t \t \t \t hoverBorderColor: 'rgba(200, 200, 200, 1)', 
 
\t \t \t \t \t \t data: output 
 
\t \t \t \t \t } 
 
\t \t \t \t ] 
 
\t \t \t }; 
 

 
\t \t \t var ctx = $("#myChart"); 
 

 
\t \t \t var barGraph = new Chart(ctx, { 
 
\t \t \t \t type: 'bar', 
 
\t \t \t \t data: chartdata 
 
\t \t \t }); 
 
\t \t }, 
 
\t \t error: function(data) { 
 
\t \t \t console.log(data); 
 
\t \t } 
 
\t }); 
 
});

我收到一個空圖：

在這個問題上的任何幫助將被極大的重視！

來源

2017-06-19 pol_guy

你知道什麼格式，或正是控制檯的數據應該看起來像>' – unixmiah

據我所知，控制檯輸出的照片是正確的格式。我的猜測是，這個問題源自嘗試將值推入「日期」和「輸出」數組。 –

它不起作用的原因是因爲您將響應數據作爲JSON字符串而不是JSON對象獲取。

所以，使其與ChartJS工作，你需要先分析它，使用JSON.parse()方法...

$(document).ready(function() { 
    $.ajax({ 
     url: "prod_agg.php", 
     method: "GET", 
     success: function(data) { 
     console.log(data); 

     var data = JSON.parse(data); //parse JSON string 

     var date = []; 
     var output = []; 
     ...

來源

2017-06-19 20:42:40

你明白了！非常感謝！ –

條形圖，chart.js PHP不會加載

回答

相關問題