Question

我有一个条形图，我试图用chart.js创建一个PHP数组并通过ajax加载。我能够使用ajax加载数据（在控制台中验证）但我无法获取图中的数据 - 这是控制台中的数据：

我没有收到任何错误消息，所以我在这一点上感到困惑。以下是所有代码：

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>

JS

$(document).ready(function(){
	$.ajax({
		url: "prod_agg.php",
		method: "GET",
		success: function(data) {
			console.log(data);
			var date = [];
            var output = [];

			for(var i in data) {
				date.push(data[i].date);
				output.push(data[i].output);
			}

			var chartdata = {
				labels: date,
				datasets : [
					{
						label: 'Date',
						backgroundColor: 'rgba(200, 200, 200, 0.75)',
						borderColor: 'rgba(200, 200, 200, 0.75)',
						hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
						hoverBorderColor: 'rgba(200, 200, 200, 1)',
						data: output
					}
				]
			};

			var ctx = $("#myChart");

			var barGraph = new Chart(ctx, {
				type: 'bar',
				data: chartdata
			});
		},
		error: function(data) {
			console.log(data);
		}
	});
});

我收到一张空图表：

对这个问题的任何帮助都会受到极大的重视！

Answer 1

它无法工作的原因是，您将响应数据作为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 = [];
         ...

条形图，chart.js PHP无法加载

1 个答案: