如何在 MySQL 计数查询后通过下拉列表按年份过滤 Chart JavaScript Dashboard？答案

【问题标题】：How to filter Chart JavaScript Dashboard by Year through dropdown after the MySQL count query?如何在 MySQL 计数查询后通过下拉列表按年份过滤 Chart JavaScript Dashboard？
【发布时间】：2020-08-08 21:18:39
【问题描述】：

我现在很挣扎。我能够获取学生表上某些行的计数，并使用 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();

这些代码可以正常工作，但您可以添加一些东西来实现我想要的吗？我只需要使用链接图片上的下拉菜单按学年过滤我的图表。

【问题讨论】：

标签： javascript php mysql json chart.js

【解决方案1】：

我不知道您是否对此有解决方案。首先，我不认为应该有价值。尝试使用列表。另外，我会在这里使用一个 js 事件监听器。可能会点击。

【讨论】：