Fusioncharts将值变量转换为使用vue和laravel无法使用的值

问题描述 投票:1回答:1

我如何在融合图表的users属性中传递value变量?当我将静态数据像数字一样放置时,它将起作用。但是当我执行this.users时,它不起作用。有人可以知道解决方案吗?我正在使用laravel和axios的API路由。

这是我的代码

<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 {

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

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

    },
    created: function(){
       this.getdata();
    }
}

</script>

静态数据的输出enter image description here

但是当我执行"value": this.users

enter image description here

您可以从左下角看到,显示用户数是因为我在{{users}}进行测试后写了chart-container

php laravel vue.js charts
1个回答
1
投票

您必须在axios方法中添加dataSource属性和指定的索引。

  getdata(){
           axios.get('api/graphs')
            .then(res=>{
                this.users = res.data;
                this.dataSource.data[0].value = this.users
            })
       }
© www.soinside.com 2019 - 2024. All rights reserved.