我希望能够使用ChartJs生成条形图和饼图。我使用php和mysql来获取数据。我想要制作的条形图是一张图表,显示男生或女生的学生数量以及学生总数。下面是我多么希望的结果出现一个例子:如何正确地将php mysql数据传递给ChartJs
它可能不完全一样,但我觉得它给一个想法。我与我的代码有关的问题似乎并不明白,因为我是ChartJs的新手,只是尝试了一下,因为morris.js没有得到完全支持。这里是我的代码的外观:
的Html
<div class="box box-success">
<div class="box box-header with-border">
<h3 class="box-title">Student Chart</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
</button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
</div>
<div class="box-body">
<canvas id="mycanvas" style="height:230px;"></canvas>
</div>
</div>
脚本:
$.ajax({
url: 'data.php',
type: 'GET',
success:function(data){
console.log(data);
var male = [];
var female = [];
for(var count in data){
male.push(data[count].male);
female.push(data[count].female);
}
var chartdata = {
labels: male,
datasets: [
{
label: 'Student Gender',
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:female
}
]
};
var ctx = $('#mycanvas');
var barGraph = new Chart(ctx, {
type:'bar',
data: chartdata
});
},
error:function(data){
console.log(data);
}
});
data.php
$query = "SELECT
SUM(CASE WHEN gender = 'Male' THEN 1 ELSE 0 END) as Male,
SUM(CASE WHEN gender = 'Female' THEN 1 ELSE 0 END) as Female
FROM students";
$output = array();
if ($result = mysqli_query($connection, $query)) {
# code...
foreach ($result as $row) {
# code...
$output[] = $row;
}
} else {
die("There was a problem". mysqli_error($connection));
}
echo json_encode($output);
下面是我从控制台得到的结果:
[{“Male”: “5”,“女”:“2”}]
将意识到如何使它更好的建议,也为饼图做同样的事情。
基于我所做的事,这是我的表是如何显示:
注意请忽略照片上的频率。
我已经采用我的代码来匹配你,这是我从控制台得到的结果:[{“gender”:“Female”,“total”:“2”},{“gender”:“Male “,”total“:”5“}],但图表仍显示相同。 –
我已经更新了代码,因为您有第二个字段的“全部”..现在检查.. –