У меня есть кольцевая диаграмма, и я хочу отобразить счет пользователя на основе столбца 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 devtools
![enter image description here](https://i.stack.imgur.com/C3tDw.png)
Текущий счет для пользователя типа admin - 4
, а для обычных пользователей - 2
, что является правильным. Таким образом, пончик будет разделен на две части.