gpt4 book ai didi

javascript - 使用图表js显示的图表不正确

转载 作者:行者123 更新时间:2023-11-28 04:00:27 27 4
gpt4 key购买 nike

我正在使用 XAMPP Web 服务器。

我在htdocs中创建了文件夹chartexample。

现在我想使用图表js显示数据库数据。

所以我在chartexample文件夹中创建了data.php和bargraph.html文件。同样,我在 Chartexample 文件夹的 js 文件夹中创建了 app.js 文件。

但是当我运行此代码时,图表上显示未定义。以下是我的代码:

数据.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();

这是 bargraph.html

<!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>

和app.js

$(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);
}
});
});

最佳答案

我怀疑问题出在您的查询上。

$sql = "SELECT employee.FirstName, count(*) as TotalGroups from groupdetails, employee WHERE groupdetails.EmpId=employee.EmpId group by groupdetails.EmpId";

在上面,您使用 WHERE 指定两个表之间的链接。这是JOIN 的工作。您还需要在 WHERE 中指定一些具体内容,除非您想获取所有行。

$SQL = "SELECT employee.FirstName, count(*) as 'TotalGroups' FROM groupdetails g JOIN employee e ON g.EmpId = e.EmpId

如果您需要在其中使用 WHERE 来排除某些数据,则需要指定该表。例如,WHERE g.id = 5 从 groupdetails 表中返回 ID 5。

如果您确实想要返回所有行,请完全省略WHERE子句。

关于javascript - 使用图表js显示的图表不正确,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47162186/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com