javascript - Fusioncharts 使用 vue 和 laravel 显示来自 Controller 的数据，其中条件是 count 和 group

Question

我有一个圆环图，我想根据类型列显示用户计数。在我的 Controller 中，我收到一个返回计数的查询。我的问题是当我在 vue 组件中渲染图表时，没有显示数据。但是当我查看 vue devtools 时，会显示数据，但它是数组/对象格式。有人可以知道我应该做什么吗？

我的 Controller

  $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 开发工具

用户类型 admin 的当前计数为 4，常规用户为 2，这是正确的。所以 donut 会被分成两部分。

Answer 1

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

它应该看起来像这样。

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

并在您的 dataSource.data 中

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

请更改您的查询。它应该返回类型和计数。像这个。 how to return a response object json in laravel