Question

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

2017-06-19

744

javascript php ajax chart.js

我有一个条形图，我正尝试使用 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 = [];
         ...