时间戳

首页 > 解决方案 > Fusioncharts 使用 vue 和 laravel 显示来自控制器的数据，其中条件是计数和分组

javascript - Fusioncharts 使用 vue 和 laravel 显示来自控制器的数据，其中条件是计数和分组

问题描述

我有一个圆环图，我想根据该列显示用户的计数type。在我的控制器中，我得到了一个返回计数的查询。我的问题是当我在我的 vue 组件中渲染图表时，没有显示数据。但是当我查看我的 vue devtools 时，显示的数据是数组/对象格式。有人可以知道我该怎么做吗？

我的控制器

  $users = \DB::table('users')
                     ->select(\DB::raw('count(*) as type'))
                     ->groupBy('type')
                     ->get();
         return response()->json($users);

我在 vue 组件中的脚本

 return {

            users: [],
            "type": "doughnut2d",
            "renderAt": "chart-container",
            "width": "550",
            "height": "350",
            "dataFormat": 'json',
            "dataSource": {
                "chart": {
                    "caption": "User Count", "theme": "fusion"
                }
                ,
                "data": [{
                    "label": "Admin Users",
                    "value": this.users
                }, 
               ]
            }
        }
    },
    methods: {

          getdata(){
           axios.get('api/graphs')
            .then(res=>{
                this.users = res.data;
                this.dataSource.data[0].value = this.users
            })
       }

    },

Vue 开发工具

在此处输入图像描述

4用户类型 admin和普通用户的当前计数2是正确的。所以甜甜圈会分成两份。

标签： javascriptphplaravelvue.jscharts

解决方案

您还应该返回用户的类型，以便 dataSource.data.label 是动态的。

它应该看起来像这样。

dataSource.data.push({
    'label': res.data.typeUser
    'value': res.data.count
})

并在您的 dataSource.data

 "dataSource": {
                "chart": {
                    "caption": "User Count", "theme": "fusion"
                }
                ,
                "data":[]
            }

请更改您的查询。它应该返回类型和计数。像这个。如何在laravel中返回响应对象json

推荐阅读