使用Chart.js创建动态条形图，其中数据来自数据库

Question

我一周以来一直在研究这个问题，但到目前为止，我无法为此获得正确的输出。

我正在使用一个在线系统，我投影的数据来自数据库。我的数据库中有一个注册记录表。使用Chart.js，我想显示每年注册的动态条形图。条形图工作得很好，但是如果计数与正确的年份不匹配，则会显示不准确的结果。

我注意到，发生这种情况是因为当一年没有数据时，另一年会填满今年，结果是错误的。

我将做什么，以便忽略空年数据或将其设置为零。我希望你能理解我的问题，因为我一直在寻找解决方案，但我找不到合适的答案。

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>

<script>
    var year = ['2000','2001','2002', '2003','2004','2005','2006','2007','2008','2009','2010','2011','2012','2013','2014','2015','2016','2017','2018','2019','2020'];
    var female = <?php echo $female; ?>;
    var male = <?php echo $male; ?>;

    var entranceDataset = {
                  label: 'Female',
                  type: 'bar',
                  yAxesID : "y-axis-1",
                  data: female,
                  backgroundColor: 'rgba(0, 204, 0, 0.2)',
                  borderColor: 'rgba(0, 204, 0,1)',
                  borderWidth: 1
              };

        var dataset = [];
        dataset.push(entranceDataset);

          var exitDataset = {
                    label: 'Male',
                    type: 'bar',
                    yAxesID : "y-axis-1",
                    data: male,
                    backgroundColor: 'rgba(54, 162, 235, 0.2)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                };

          dataset.push(exitDataset);

        var ctx = $('#enrollcanvas');

        mainThroughputChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: year,
                datasets: dataset
            },
            options: {
                scales: {
                    xAxes : [{
                      gridLines : {
                            display : false
                        },
                        scaleLabel: {
                            display: true,
                            labelString: 'Year'
                          }
                    }]
                },

            }
        });
  </script>