图表仅使用jquery ajax php打印出第一个值
我试图将学生记录中的性别分布打印到图表仅使用jquery ajax php打印出第一个值,php,jquery,mysql,ajax,chart.js,Php,Jquery,Mysql,Ajax,Chart.js,我试图将学生记录中的性别分布打印到Chart.js,但它只将第一个数据打印到图表中 基本上,我所做的是尝试将studGender的所有实例计算为stud\u orgmember的总数,并按studGender(女性、男性)对其进行分组 我似乎无法让它工作这里是index.php的代码 <!DOCTYPE html> <html> <head> <title>Creating Dynamic Data Graph using PHP and Cha
Chart.js
,但它只将第一个数据打印到图表中
基本上,我所做的是尝试将studGender
的所有实例计算为stud\u orgmember
的总数,并按studGender(女性、男性)
对其进行分组
我似乎无法让它工作这里是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>`
<?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);
?>
使用PHP和Chart.js创建动态数据图
身体{
宽度:550PX;
}
#图表容器{
宽度:100%;
高度:自动;
}
$(文档).ready(函数(){
showGraph();
});
函数showGraph()
{
{
$.post(“data.php”,
功能(数据)
{
控制台日志(数据);
变量名称=[];
var标记=[];
用于(数据中的var i){
name.push(数据[i].studGender);
marks.push(数据[i].total);
}
var图表数据={
标签:名称,
数据集:[
{
标签:“SOs中的性别分布”,
背景颜色:“#49e2ff”,
边框颜色:“#46d5f1”,
hoverBackgroundColor:“#CCCC”,
悬停边框颜色:“#666666”,
数据:马克
}
]
};
var graphTarget=$(“graphCanvas”);
var条形图=新图表(图形目标{
类型:'bar',
数据:图表数据
});
});
}
}
`
下面是data.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>`
<?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);
?>
我要大胆猜测一下,男性的价值是
27
。在这种情况下,查看y轴会发现问题:
您可能需要做的是设置beginAtZero:true
:
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
@马可:这回答了你的问题吗?