График Dynami c с графиком. js и vue. js - PullRequest
0 голосов
/ 27 марта 2020

ОБНОВЛЕНО 1

У меня есть следующая гистограмма:

grafico de ordenes

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

К этому графику я добавил выбор, который позволяет мне фильтровать по имени оператора, а затем график, то есть , если я выберу оператора Луиса и нажму кнопку поиска, он должен только отобразить оператора Луиса со всеми его завершенными заказами, что в этом случае у вас только 2 заказа в завершенном состоянии.

У меня есть запрос, у меня есть график работы, у меня есть выбор.

Моя проблема не в том, чтобы знать, как построить график снова, когда оператор выбран из входного выбора, показывая только те порядки, которые выбранный оператор имеет. Я полагаю, что решение этого будет сделано в сценарии, откуда я передаю свои переменные, делая запрос к URL-адресу, et c.

Как я могу показать на своем графике только оператор Луис и все его назначенные ордера?

Есть ли способ, позволяющий мне повторно визуализировать график?

Как я могу решить эта проблема? Для графика я использую библиотечную диаграмму. js. Пока все, что указано выше:

DashboardController:

В этом методе я делаю запрос к моей базе данных:

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, 'users'=> User::NotRole(['Admin', 'Supervisor'])->get()];

    }

Как это динамически c graph, я загружаю данные из моей базы данных, я понимаю, что должен сделать ajax вызов, сбросить полученные данные и затем graph, не могли бы вы помочь мне сделать ajax вызов?

Это пример, в основном здесь я понимаю, что должен сделать ajax вызов, чтобы иметь возможность сбросить полученные данные, а затем построить график.

var ctx = document.getElementById('orders');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});

Честно говоря, у меня мало знаний, поэтому я Мне нужно двигаться вперед, мне нужен кто-то, кто поможет мне с решением, как реализовать char. js рядом с j ajax и jquery

...