Question

我希望条形的每种颜色都不同，这取决于我在数据库中拥有的数据。问题是，当我使用下面的代码时，仅更改第一个栏，其余的则不然。如何更改每个酒吧？有人可以帮我解决我的问题吗？这是我的下面的代码

    dynamicColor : function() {
        var r = Math.floor(Math.random() * 255);
        var g = Math.floor(Math.random() * 255);
        var b = Math.floor(Math.random() * 255);
        return "rgba(" + r + "," + g + "," + b + ", 0.5)";
    },
    poolColors : function(a) {
        var pool = [];
        for(var i = 0; i < a; i++) {
            pool.push(this.dynamicColor());
        }
        return pool;
    }, 
    retrieveDistributedPerDayByLine : function() {
        var self = this;

        axios.post(this.urlRoot + this.api + "retrieve_transaction_per_day.php")
        .then(response => {
            console.log(response);
            vm.distributed_per_day = response.data
                var ctxChart = self.$refs.myChart.getContext('2d');

                var myChart = new Chart(ctxChart, {
                    type: 'bar',
                    data: {
                        labels: vm.distributed_per_day.map(item => item.Day),
                        datasets: [{
                        label: 'Total Amount',
                        data: vm.distributed_per_day.map(item => item.Amount),
                        backgroundColor: [

                           this.poolColors(vm.distributed_per_day.length)

                        ],
                        borderColor: [
                         this.poolColors(vm.distributed_per_day.length)
                        ],
                        borderWidth: 1
                    }]
                },
                reponsive: true,
                options: {
                    title : {
                        display : true,
                        text : "Distrubuted Reports per Day",
                        fontFamily: "sans-serif",
                        fontSize: 18
                    },
                    legend: {
                        display: false
                    },
                    tooltips: {
                        enabled: true,
                        padding: 10
                    }
                }
            });
        }).catch(e => {
            console.log(e)
        });
    },

Answer 1

this.poolColors方法将返回一个数组，因此您在数组中传递了一个数组，因此它被视为一个元素……应该像这样：

backgroundColor: this.poolColors(vm.distributed_per_day.length),
borderColor: this.poolColors(vm.distributed_per_day.length)

ChartJS和VueJS中的条形图中每个条的颜色不同

1 个答案: