laravel - 带有 chart.js 和 vue.js 的动态图

Question

更新 1

我有以下条形图：

如您所见，我正在显示已分配给具有操作员角色的用户的所有已完成状态的工作订单。

在此图中，我添加了一个选择，允许我按操作员名称进行过滤，然后按图表，也就是说，如果我选择操作员 Luis 并按下搜索按钮，它应该只绘制 Luis 操作员及其所有已完成订单的图表，在这种情况下，您只有 2 个处于已完成状态的订单。

我有查询，我有图表工作，我有选择。

我的问题是不知道从输入选择中选择运算符后如何再次绘制图表，仅显示所选运算符具有的订单。 我想这个问题的解决方案将在我提供变量、对 url 进行查询等的脚本中完成。

我怎样才能在我的图表上只显示操作员 Luis 和他分配的所有订单？

有没有一种方法可以让我重新渲染图表？

我怎么解决这个问题？ 对于图表，我使用的是库 chart.js。到目前为止，上述所有内容：

仪表板控制器：

在这种方法中，我对我的数据库进行查询：

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()];

    }

因为它是一个动态图，我正在从我的数据库中下载数据，我知道我必须进行 ajax 调用，转储获得的数据然后绘制图表，你能帮我进行 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
                }
            }]
        }
    }
});

老实说，我没有太多知识，所以我需要继续前进，我需要有人指导我解决方案，如何在 jajax 和 jquery 旁边实现 char.js

标签： laravelvue.jsaxioschart.js