Laravel-离开状态在chartjs BarChart中给出错误的结果

Question

在我的Laravel-5.8应用程序中，我正在使用ChartJs在BarChart上显示员工请假状态

控制器

public function leave()
{
    $userCompany = Auth::user()->company_id;
    $userId = Auth::user()->id;
    $userEmployee = Auth::user()->employee_id;

     // All Leave Requests
    $allEmployeeLeaves = HrLeaveRequest::select(DB::raw("COUNT(leave_status) as count"))
        ->where('company_id', $userCompany)
        ->whereYear('created_at', date('Y'))
        ->orderBy(DB::raw("MONTH(created_at)"), 'ASC')
        ->groupBy(DB::raw("MONTH(created_at)"))
        ->get()->toArray();
    $allEmployeeLeaves = array_column($allEmployeeLeaves, 'count');     

//Approved Leaves
    $approvedLeaves = HrLeaveRequest::select(DB::raw("COUNT(leave_status) as count"))
        ->where('company_id', $userCompany)
        ->where('leave_status', '=', 4)
        ->whereYear('created_at', date('Y'))
        ->orderBy(DB::raw("MONTH(created_at)"), 'ASC')
        ->groupBy(DB::raw("MONTH(created_at)"))
        ->get()->toArray();
    $approvedLeaves = array_column($approvedLeaves, 'count'); 

// Rejected Leaves
    $rejectedLeaves = HrLeaveRequest::select(DB::raw("COUNT(leave_status) as count"))
        ->where('company_id', $userCompany)
        ->where('leave_status', 3)
        ->whereYear('created_at', date('Y'))
        ->orderBy(DB::raw("MONTH(created_at)"), 'ASC')
        ->groupBy(DB::raw("MONTH(created_at)"))
        ->get()->toArray();
    $rejectedLeaves = array_column($rejectedLeaves, 'count');          


    return view('leave-default')
            ->with('allEmployeeLeaves',json_encode($allEmployeeLeaves,JSON_NUMERIC_CHECK))
            ->with('approvedLeaves',json_encode($approvedLeaves,JSON_NUMERIC_CHECK))
            ->with('rejectedLeaves',json_encode($rejectedLeaves,JSON_NUMERIC_CHECK));       
}   

从上面的查询中，我想显示一个条形图：

1. 所有请假申请

2. 批准的假期

3. 拒绝休假

实际上，当leaves_status = 3时，它被拒绝离开，而leaves_status = 4被批准为假期。

查看

          <div class="card-body">
            <div class="chart">
              <canvas id="leaveBarChart" style="min-height: 250px; height: 450px; max-height: 250px; max-width: 100%;"></canvas>
            </div>
          </div>

<script src="{{ asset('theme/adminlte3/plugins/chart.js/Chart.min.js') }}"></script>

<script>
    var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var data_all_leaves = <?php echo $allEmployeeLeaves; ?>;
    var data_approved_leaves = <?php echo $approvedLeaves; ?>;
    var data_rejected_leaves = <?php echo $rejectedLeaves; ?>;


    var barChartData = {
        labels: month,
        datasets: [{
            label: 'All Leave Requests',
            backgroundColor: "#f56954",
            data: data_all_leaves
        }, {
            label: 'Approved Leaves',
            backgroundColor: "#00a65a",
            data: data_approved_leaves
        }, {
            label: 'Rejected Leaves',
            backgroundColor: "#f39c12",
            data: data_rejected_leaves
        }]
    };


    window.onload = function() {
        var ctx = document.getElementById("leaveBarChart").getContext("2d");
        window.myBar = new Chart(ctx, {
            type: 'bar',
            data: barChartData,
            options: {
                elements: {
                    rectangle: {
                        borderWidth: 2,
                        borderColor: 'rgba(255, 99, 132, 1)',
                        borderSkipped: 'bottom'
                    }
                },
                responsive: true,
                maintainAspectRatio     : true,
                title: {
                    display: true,
                    text: 'Monthly Leave Status'
                }
            }
        });


    };
</script>

显示结果

我希望Barchart显示：

[所有叶子，被拒绝的叶子和批准的叶子。但是，我有这三（3）个观察结果。

1. 该图表仅显示所有假期，即2。其中包括批准的假期（1）和拒绝的假期（1）。它没有显示批准和拒绝的叶子。

2. 所有请假均在5月，但将其放在1月

3. 条形图上的休假计数以1、2 ...表示的小数位数（1.00，1.10 ...）]] >>

   如何纠正所有这些？

谢谢

在我的Laravel-5.8应用程序中，我正在使用ChartJs Controller在BarChart上显示员工请假状态。 $ userId = Auth :: ...

Answer 1

您的某些柱可能会出现在图表中，但实际上是隐藏的，因为yAxis从1开始。因此，应在图表scales.yAxes.ticks内添加以下options定义。这也可以解决yAxis刻度标签中的小数。

options: {
  scales: {
    yAxes: [{
      ticks: {
        beginAtZero: true,
        stepSize: 1
      }
    }]
  }
  ...
还请确保各个datasets.data数组中值的位置与labels数组中的相应标签相同。这样，这些条也应该出现在正确的位置。