具有动态数据vuejs和chart.js的图像

如何解决具有动态数据vuejs和chart.js的图像

我有这段代码可以显示VueJS的条形图：

Vue.component('bar-chart',{
    extends: VueChartJs.Bar,data: function () {
        return {
            datacollection: {
                labels: ['MICROFINANZAS -SECTOR COMERCIO','MICROFINANZAS -SECTOR SERVICIOS'],datasets: [
                    {
                        label: 'Data One',backgroundColor: '#f87979',pointBackgroundColor: 'white',borderWidth: 1,pointBorderColor: '#249EBF',data: [15000,71700]
                    }
                ]
            },options: {
                scales: {
                    yAxes: [{
                        ticks: {
                            beginAtZero: true
                        },gridLines: {
                            display: true
                        }
                    }],xAxes: [{
                        ticks: {
                            beginAtZero: true
                        },gridLines: {
                            display: false
                        }
                    }]
                },legend: {
                    display: false
                },tooltips: {
                    enabled: true,mode: 'single',callbacks: {
                        label: function (tooltipItems,data) {
                            return '$' + tooltipItems.yLabel;
                        }
                    }
                },responsive: true,maintainAspectRatio: false,height: 200
            }
        }
    },mounted() {
        // this.chartData is created in the mixin
        this.renderChart(this.datacollection,this.options)
    }
})

VueJS中的方法

var app = new Vue({
    el: '#grid',data: {
      columns: ['id','nombre'],objeto: "",searchQuery: "",dataChart: "",dataChart1: "",},created: function () {
        this.getDeudas();
    },methods: {        
            getDeudas: function () {
                this.$http.get(baseURL + "/Home/ConsultarDeudasHome").then(function (response) {
                    this.lista = response.data.data;
                    console.log(this.lista);
                    this.objeto = JSON.parse(this.lista);
                    console.log(this.objeto[1].original);
    
                    this.dataChart = [this.objeto[0].original,this.objeto[0].actual];
                    console.log(this.dataChart);
                    this.dataChart1 = [this.objeto[1].original,this.objeto[1].actual];
                });
            },

此代码显示此条形图：

但是我需要在代码中替换两个动态变量：

标签：['MICROFINANZAS -SECTOR COMERCIO'，'MICROFINANZAS -SECTOR SERVICIOS']

数据：[15000，71700]

有关方法 getDeudas（）

的信息

如何执行此操作？

解决方法

这是解决方案，我使用props和watch：

Vue.use(VueTables.ClientTable);
Vue.component("bar-chart",{
    extends: VueChartJs.Bar,props: ["data","options"],mounted() {
        this.renderLineChart();
    },computed: {
        chartData: function () {
            return this.data;
        }
    },methods: {
        renderLineChart: function () {
            this.renderChart(
                {
                    labels: ["Sector Comercio","Sector Servicios"],datasets: [
                        {
                            label: "Consolidado",backgroundColor: "#f87979",data: this.chartData
                        },],},{ responsive: true,maintainAspectRatio: false }
            );
        }
    },watch: {
        data: function () {
            this.renderLineChart();
        }
    }
});



const baseURL = window.location.protocol + "//" + window.location.host;
var app = new Vue({
    el: '#grid',data: {
      columns: ['id','nombre'],objeto: "",dataChart: "",created: function () {
        this.getDeudas();
    },methods: {        
        getDeudas: function () {
            this.$http.get(baseURL + "/Home/ConsultarDeudasHome").then(function (response) {
                this.lista = response.data.data;
                this.objeto = JSON.parse(this.lista);        
                this.dataChart = [this.objeto[0].original,this.objeto[1].original];
            });
        },})