1
XAMPP 웹 서버를 사용하고 있습니다.차트 js를 사용하여 잘못된 차트가 표시되었습니다.
htdocs에서 chartexample 폴더를 만들었습니다.
이제 차트 j를 사용하여 데이터베이스 데이터를 표시하려고합니다.
그래서 data.php 및 bargraph.html 파일을 chartexample 폴더에 생성했습니다. 마찬가지로 chartexample 폴더의 js 폴더에 app.js 파일을 만들었습니다.
하지만이 코드를 실행하면 정의되지 않은 코드가 차트에 표시됩니다. 다음은 내 코드입니다 : 여기
data.php
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "shgreportingdatabase";
// Create connection
$conn = new mysqli($servername, $username, $password,$dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
echo "Connected successfully";
$sql = "SELECT employee.FirstName, count(*) as TotalGroups from groupdetails, employee WHERE groupdetails.EmpId=employee.EmpId group by groupdetails.EmpId";
$result = $conn->query($sql);
if ($result!=null) {
// output data of each row
while($row = $result->fetch_assoc()) {
print json_encode($row);
}
}
$conn->close();
것은
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - BarGraph</title>
<style type="text/css">
#chart-container {
width: 640px;
height: auto;
}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<!-- javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
bargraph.html 내가이 문제가 쿼리에 의심
$(document).ready(function(){
$.ajax({
url: "http://localhost/chartexample/data.php",
method: "GET",
success: function(data) {
console.log(data);
var emp = [];
var groups = [];
for(var i in data) {
emp.push(data[i].FirstName);
groups.push(data[i].FirstName);
}
var chartdata = {
labels: emp,
datasets : [
{
label: 'SHG Groups',
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: groups
}
]
};
var ctx = $("#mycanvas");
var barGraph = new Chart(ctx, {
type: 'bar',
data: chartdata
});
},
error: function(data) {
console.log(data);
}
});
});
아약스 성공 콜백에서'console.log (data);'에 원하는 데이터를 얻고 있습니까? –