javascript - 如何在 MySQL 计数查询后通过下拉列表按年份过滤 Chart JavaScript Dashboard?
问题描述
我现在正在挣扎。我能够获取学生表上某些行的计数,并使用 Chart JavaScript 将它们反映在我的仪表板图表上,但现在我需要通过下拉列表按学年过滤图表。
所以这是我的仪表板。实际上,我需要按学年和课程过滤这些图表,但为了降低复杂性,我只是为每门课程制作了单独的页面(如您在左侧边栏上所见),因此查询直接注入带有课程名称的特定课程。但是现在,我需要按学年过滤它们,我能够在下拉列表中填充学年,但我只是不知道如何做真实的事情或让它发挥作用。:
所以这是我的 chart_data.php 示例(这是我用来反映性别图表上的性别数量的代码)
<?php
$dbhost = 'localhost';
$dbname = 'eprs';
$dbuser = 'root';
$dbpass = '';
try{
$dbcon = new PDO("mysql:host={$dbhost};dbname={$dbname}",$dbuser,$dbpass);
$dbcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $ex){
die($ex->getMessage());
}
///BA ENGLISH STARTS
//FETCH GENDER DATA
$stmt=$dbcon->prepare("SELECT gender, COUNT(*) AS count FROM student WHERE course = 'BA ENGLISH' GROUP BY gender;");
$stmt->execute();
$labels_gender_baeng=[];
$counts_gender_baeng = [];
while($row=$stmt->fetch(PDO::FETCH_ASSOC)){
$labels_gender_baeng[]= $row['gender'];
$counts_gender_baeng[] = $row['count'];
}
?>
这是我的 BAENG.php 中带有 Chart JavaScript 的 javasrcipt(BAENG 是英语文学学士学位)
<script>
//GENDER CHART
var ctx = document.getElementById("gender_baeng").getContext('2d');
var myChart = new Chart(ctx, {
type: 'pie',
data: {
labels: <?php echo json_encode($labels_gender_baeng);?>,
datasets: [{
data: <?php echo json_encode($counts_gender_baeng);?>,
borderWidth: 2,
borderColor: '#eff1f0',
fill: false
}]
},
options: {
responsive: true,
maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
plugins: {
colorschemes: {
scheme: 'brewer.DarkTwo8'
}
},
legend: {
labels: {
// This more specific font property overrides the global property
fontColor: '#eff1f0',
fontFamily: 'consolas',
fontSize: 15,
fontStyle: 'bold'
}
}
}
});
</script>
现在,这是我的 BAENG.php 中的下拉按钮
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group dropleft" role="group">
<button name="acadYear" id="acadYear" type="button" class="btn btn1 dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
A.Y.
</button>
<div class="dropdown-menu" aria-labelledby="acadYear">
<?php
foreach($result as $row)
{
echo '<a class="dropdown-item" value="'.$row["acadYear"].'">'.$row["acadYear"].'</a>';
}
?>
</div>
</div>
<button type="button" class="btn btn1" title="download PDF">
<i class="fas fa-download"></i>
</button>
</div>
以及填充我的下拉列表的代码
$connect = new PDO("mysql:host=localhost;dbname=eprs", "root", "");
$query = "SELECT acadYear FROM student WHERE course = 'BA ENGLISH' GROUP BY acadYear DESC";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
这些代码正在工作,但你可以添加一些东西来实现我正在寻找的东西吗?我只需要在链接图片上使用该下拉菜单按学年过滤我的图表。
解决方案
我不知道你有没有办法解决这个问题。首先,我不认为应该有价值。尝试使用列表。另外,我会在这里使用一个 js 事件监听器。也许点击。
推荐阅读
- google-bigquery - 日期卷积通过时间戳转换表 - 如何
- data-structures - 如何使用朴素贝叶斯分类器进行多类分类?
- scala - 将入口 hocon 转换为数据框
- sql - 在大视图上选择列子集时的数据库引擎效率?
- mysql - 查找销售人员拥有的潜在客户数量
- c++ - Boost 胎面代码在 VC++ 下编译但不在 GCC 下编译:如何获得更好的调试信息
- javascript - JavaScript 函数重载/覆盖
- angular - 当放置在延迟加载模块的组件中时,Angular 6 指令未初始化
- node.js - Ember 和 Node.js Nginx 配置亚马逊 EC2 Ubuntu 服务器
- batch-file - 需要在批处理文件中模拟 Win 键