Где моя ошибка при попытке отобразить этот график с диаграммой. js? - PullRequest
Новая
       9

Где моя ошибка при попытке отобразить этот график с диаграммой. js?

0 голосов
/ 31 марта 2020

В моем проекте Laravel я реализую диаграмму. Библиотека js пытается визуализировать гистограмму.

В которой должны отображаться все рабочие задания в готовом состоянии, которые были назначены пользователям с роль оператора.

Если вы хотите построить график, просто данные не отображаются, это пустой график.

grafico

Это мой контроллер ReportController с помощью этого метода publi c 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 вернул мой запрос правильно? С этим результатом я могу построить график?

Это мой отчет. 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, чтобы он возвращал действительный ответ JSON для диаграммы. js. Сбросьте эти данные, полученные с помощью ajax звонка, и извлеките

Не могли бы вы помочь мне найти и исправить мою ошибку?

ОБНОВЛЕНО 1

На всякий случай, если возникнет какая-либо ошибка, замените my 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.pu sh и метки. pu sh

попробуйте что-то подобное, но это не сработает: 

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