Fusioncharts отображают данные из контроллера, где условие является count и groupBy, используя vue и laravel - PullRequest
0 голосов
/ 23 октября 2019

У меня есть кольцевая диаграмма, и я хочу отобразить счет пользователя на основе столбца 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

Текущий счет для пользователя типа admin - 4, а для обычных пользователей - 2, что является правильным. Таким образом, пончик будет разделен на две части.

1 Ответ

1 голос
/ 23 октября 2019

Вы также должны вернуть тип пользователя, чтобы dataSource.data.label был динамическим.

Он должен выглядеть следующим образом.

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

и In your dataSource.data

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

Пожалуйста, измените ваш запрос. Он должен вернуть тип и количество. Как этот. как вернуть объект ответа json в laravel

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...