条形图，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不会加载

回答

相关问题