1

我需要帮助调试这个问题，我正在使用 javascript 和 php

这是我的文件

 data.php -> display the data from database
 bargraph.html -> bar graph display
 chart.min.js, jquery-3.2.1.min.js, and my defined js file app.js - js files

问题是我想要数据库预订状态的条形图显示。(Pending, Accepted, Cancelled) 但条形图只显示数据库中reference_id的最高编号

数据库表里面有这些数据：

列：reference_id、reservation_status

1. reference_id = "1", reservation_status = "Accepted"
2. reference_id = "2", reservation_status = "Pending"
3. reference_id = "3", reservation_status = "Accepted"

但输出显示 Accepted reference_id = "3" 作为最高数字并且不显示待处理

我希望我的输出显示数据库中有两行是“已接受”，另一行是“待定”

所以 Accepted 的分数应该是 = 2 并且 Pending 是 = 3

这是我的文件。

数据.php

      <?php
    //setting header to json
    header('Content-Type: application/json');

    //database
    define('DB_HOST', '127.0.0.1');
    define('DB_USERNAME', 'root');
    define('DB_PASSWORD', '');
    define('DB_NAME', 'catering');

    //get connection
    $mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_NAME);

    if(!$mysqli){
    die("Connection failed: " . $mysqli->error);
    }

    //query to get data from the table
    $query = sprintf("SELECT reference_id, reservation_status FROM client_record ORDER BY reservation_status");

    //execute query
    $result = $mysqli->query($query);




    //loop through the returned data
    $data = array();
    foreach ($result as $row) {
    $data[] = $row;
    }

    //free memory associated with result
    $result->close();

    //close connection
    $mysqli->close();

    //now print the data
    print json_encode($data);

条形图.html

    <!DOCTYPE html>
    <html>
    <head>
        <title>ChartJS - BarGraph</title>
        <style type="text/css">
            #chart-container {
                width: 640px;
                height: auto;
            }
        </style>
    </head>
    <body>
        <div id="chart-container">
            <canvas id="mycanvas"></canvas>
        </div>

        <!-- javascript -->
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
        <script type="text/javascript" src="js/Chart.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
    </html>

和 app.js

    $(document).ready(function(){
    $.ajax({
        url: "http://localhost/samples/data.php",
        method: "GET",
        success: function(data) {
            console.log(data);
            var status = [];
            var client = [];

            for(var i in data) {
                status.push("Status " + data[i].reservation_status);
                client.push(data[i].reference_id);
            }

            var chartdata = {
                labels: status,
                datasets : [
                    {
                        label: 'Client',
                        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: client
                    }
                ]
            };

            var ctx = $("#mycanvas");

            var barGraph = new Chart(ctx, {
                type: 'bar',
                data: chartdata
            });
        },
        error: function(data) {
            console.log(data);
        }
    });
    });
4

0 回答 0