Заполните данные диаграммы в laravel, используя vue axios и fusioncharts

Question

Я хочу заполнить свои графики, используя данные из базы данных с помощью axios. Я новичок в front-end и vue. Документация для меня очень сложно на данный момент. Вот почему задайте этот вопрос здесь. Я еще не знаком с синтаксисом диаграмм.

Graph.vue

<template>
    <div>
        <div id="chart-container">
            <fusioncharts :type="type" :width="width" :height="height" :dataFormat="dataFormat"  :datasource="datasource">
            </fusioncharts>
        </div>
    </div>
</template>

<script> 
import Vue from 'vue';
import VueFusionCharts from 'vue-fusioncharts';
import FusionCharts from 'fusioncharts';
import Column2D from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
Vue.use(VueFusionCharts, FusionCharts, Column2D, FusionTheme);
export default {
    name: 'app',
    data() {
        return {
            "type": "doughnut2d",
            "renderAt": "chart-container",
            "width": "550",
            "height": "350",
            "dataFormat": 'json',
            "datasource": {
                "chart": {
                    "caption": "Number of visitors in the last 3 days", "subCaption": "Bakersfield Central vs Los Angeles Topanga", "theme": "fusion"
                }
                ,
                "data": [ {
                    "label": "Mon", "value": "15123"
                }
                ,
                {
                    "label": "Tue", "value": "14233"
                }
                ,
                {
                    "label": "Wed", "value": "25507"
                }
                ]
            }
        }
    },
    methods: {
        getData(){
             if(this.$gate.isAdmin()){
                 axios.get("api/user").then(({ data }) => (this.users = data));
            }
        }
    },
    created(){
        this.getData();
    }
}

</script>

Answer 1

Снимите статический data и замените его следующей строкой:

"data": [{
    "label": "Total Users",
    "value": this.users
}]

И добавьте axios, должно быть так:

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

Таким образом,атрибут data диаграммы теперь будет получать данные от вашего API.

Answer 2

data": [ {"label":$label, "value":$value } ]

, тогда как $ label и $ value являются массивами.