图表仅使用 jquery ajax php 打印出第一个值

Question

Im trying to print out the Gender distribution from student records to Chart.js but it only prints first data into the chart我试图将学生记录中的性别分布打印到Chart.js但它只将第一个数据打印到图表中

What I am basically doing is that I am trying to count all instances of studGender as total from stud_orgmember and grouping it by studGender(Female, Male) .我基本上在做的是，我试图从stud_orgmember计算所有的studGender实例， studGender studGender(Female, Male)对其进行分组。

and i can't seem to make it work here is the code for index.php我似乎无法让它工作这里是index.php的代码

<!DOCTYPE html>
<html>
<head>
<title>Creating Dynamic Data Graph using PHP and Chart.js</title>
<style type="text/css">
BODY {
    width: 550PX;
}

#chart-container {
    width: 100%;
    height: auto;
}
</style>
<script type="text/javascript" src="js1/jquery.min.js"></script>
<script type="text/javascript" src="js1/Chart.min.js"></script>
</head>
<body>
    <div id="chart-container">
        <canvas id="graphCanvas"></canvas>
    </div>

    <script>
        $(document).ready(function () {
            showGraph();
        });


        function showGraph()
        {
            {
                $.post("data.php",
                function (data)
                {
                    console.log(data);
                     var name = [];
                    var marks = [];


            for(var i in data){
            name.push(data[i].studGender);
                        marks.push(data[i].total);
            }

                    var chartdata = {
                        labels: name,
                        datasets: [
                            {
                                label: 'Gender Distribution from SOs',
                                backgroundColor: '#49e2ff',
                                borderColor: '#46d5f1',
                                hoverBackgroundColor: '#CCCCCC',
                                hoverBorderColor: '#666666',
                                data: marks
                            }
                        ]
                    };

                    var graphTarget = $("#graphCanvas");

                    var barGraph = new Chart(graphTarget, {
                        type: 'bar',
                        data: chartdata
                    });
                });
         }
         }
        </script>
</body>
</html>`

Here is the subsequent code for data.php下面是data.php的后续代码

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

$conn = mysqli_connect("localhost","root","","soumis");

$sqlQuery = "SELECT studGender, COUNT(studGender) AS total FROM stud_orgmember GROUP BY studGender";
$result = mysqli_query($conn, $sqlQuery);

$data = array();
foreach ($result as $row) {
    $data[] = $row;
}
mysqli_close($conn);
echo json_encode($data);
?>

Answer 1

I'm going to take a wild guess that the value of male is 27 .我将大胆猜测男性的值是27 。 In which case, looking at the y-axis reveals the problem:在这种情况下，查看 y 轴揭示了问题：

What you probably need to do is set beginAtZero: true :您可能需要做的是设置beginAtZero: true ：

options: {
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero: true
            }
        }]
    }
}

图表仅使用 jquery ajax php 打印出第一个值

问题描述

1 个解决方案

解决方案1
0 2019-12-05 09:24:48

图表仅使用 jquery ajax php 打印出第一个值

问题描述

1 个解决方案

解决方案1 0 2019-12-05 09:24:48

解决方案1
0 2019-12-05 09:24:48