php - 尝试使用 Chart.js 显示此图时，我的错误在哪里？

Question

在我的 Laravel 项目中，我正在实现试图可视化条形图的 chart.js 库。

其中应显示已分配给具有操作员角色的用户的所有已完成状态的工作订单。

当您要绘制图形时，根本不显示任何数据，它是一个空图形。

这是我的 ReportController 控制器，使用此方法 public function getChart () 我做我的查询

public function getChart(Request $request)
    {      
        $_orders = DB::table('users')
            ->join('orders','orders.user_id','=','users.id')
            ->join('model_has_roles', 'users.id', '=', 'model_has_roles.model_id')                        
            ->select('users.id','users.name', DB::raw('COUNT(orders.id) as orders_by_user'), 'model_has_roles.role_id as rol')                   
            ->where('model_has_roles.role_id', '2');
        $_orders->groupBy('orders.user_id', 'users.id',  'users.name',  'model_has_roles.role_id');
        $orders=$_orders->get();

        return ['orders' => $orders];

    }

这是我查询的结果：据观察，我有我需要的用户名和每个用户完成的订单数。

{
"orders": [
{
"id": 4,
"name": "Luis",
"orders_by_user": 2,
"rol": 2
},
{
"id": 6,
"name": "Jose",
"orders_by_user": 1,
"rol": 2
},
{
"id": 7,
"name": "Miguel",
"orders_by_user": 1,
"rol": 2
}
]
}

这是一个重要的问题：我的查询返回的 JSON 结构是否正确？有了这个结果，我可以绘制图表吗？

这是我用于图表的 report.js 文件：

使用 renderChart() 方法：我通过在我的 ajax 调用中获得的数据制作图表。

使用 getChartData () 方法：我进行 ajax 调用。

function renderChart(data, labels) {
    var ctx = document.getElementById("orders").getContext('2d');
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'ordenes',
                data: data,
                borderColor: 'rgba(75, 192, 192, 1)',
                backgroundColor: 'rgba(75, 192, 192, 0.2)',
                borderWidth: 1,
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero: true                        
                    }
                }]
            },
            title: {
                display: true,
                text: "Ordenes en estado terminado"
            },
        }
    });
}

function getChartData() {   

    $.ajax({
        url: '/admin/reports/getChart',
        type: 'GET',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
        dataType: 'json',
        success: function (data) {

           // console.log(data);
            var data = [];
            var labels = [];

            for (var i in data) {
                data.push(data[i].orders_by_user);
                labels.push(data[i].name);

            }

            renderChart(data, labels);
        },
        error: function (data) {

            console.log(data);
        }
    });
}

$("#renderBtn").click(
    function () {
        getChartData();
    }
);

换句话说，我希望使用 eloquent 优化我的查询，以便它为 chart.js 返回一个有效的 JSON 响应。转储通过 ajax 调用获得的数据并绘制

你能帮我找到并解决我的错误吗？

更新 1

以防万一出现任何错误，将我的 for: 更改为for (var i in data)：for (var i in response)

所以它看起来像这样：

 for (var i in response) {

     data.push(response[i].orders_by_user);
     labels.push(response[i].name);

 }

我认为我没有正确访问从查询中获得的数据到以后的图表。在控制台中，我看到以下信息：

{orders: Array(3)}
orders: Array(3)
0: {id: 4, name: "Luis", orders_by_user: 2, rol: 2}
1: {id: 6, name: "Jose", orders_by_user: 1, rol: 2}
2: {id: 7, name: "Miguel", orders_by_user: 1, rol: 2}
length: 3
__proto__: Array(0)
__proto__: Object

Orders 是我的数组，所以我怎样才能访问 orders_by_user 和 name 并将其正确传递给我的 data.push 和 labels.push

尝试这样的事情，但它不起作用：

data.push(response[i].orders.orders_by_user);
labels.push(response[i].orders.name);

标签： phpajaxlaravelchart.js