Question

我正在使用XAMPP网络服务器。

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

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

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

但是当我运行此代码时，undefined会显示在图表上。以下是我的代码：

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

这是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);
        }
    });
});

Answer 1

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

$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子句。

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

1 个答案: