个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-01 05:12:57 24 4
gpt4 key购买 nike

我试图将学生记录中的性别分布打印到 Chart.js 但它只将第一个数据打印到图表中

enter image description here

我基本上所做的是尝试将 stud_orgmember 中 studGender 的所有实例计算为总数，并按 studGender(Female, Male) 对其进行分组。

我似乎无法让它工作，这里是 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>`

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

最佳答案

我将大胆猜测male 的值为27。在这种情况下，查看 y 轴就会发现问题:

enter image description here

您可能需要做的是设置beginAtZero: true:

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

关于php - 图表仅使用 jquery ajax php 打印出第一个值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59182591/

24 4 0
文章推荐： java - 捕获无法送达或垃圾邮件文件夹电子邮件
文章推荐： jquery - 在javascript中将curl命令转换为jQuery $.ajax()
文章推荐： haskell - 如何阻止 leksah 替换像 not 符号这样的字符？
文章推荐： asp.net - 尝试通过 IP 地址保护文件夹中的所有 aspx 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com