Question

我想for循环标签和数据，所以我永远不会再使用labels: [this.transaction_per_day[0].Day...和data: [this.transaction_per_day[0].Amount...。我只是意识到，当用户第二天进行交易时，数据不会显示在条形图中。问题是当我将索引更改为括号内的i而不是0,1,2,3时。它仅显示第一个索引0。有人可以帮忙解决我的问题吗？这是我的代码

 retrieveTransactionPerDay : function() {
        var self = this

        axios.post(this.urlRoot + this.api + "retrieve_transaction_per_day.php")
        .then(response => {
            console.log(response);
            vm.transaction_per_day = response.data
            for(var i = 0; i < this.transaction_per_day.length; i++) {

                var ctxChart = self.$refs.myChart.getContext('2d')

                var myChart = new Chart(ctxChart, {
                    type: 'bar',
                    data: {
                        labels: [this.transaction_per_day[0].Day, this.transaction_per_day[1].Day, this.transaction_per_day[2].Day, this.transaction_per_day[3].Day],
                        datasets: [{
                        label: 'Transaction per day',
                        data: [this.transaction_per_day[0].Amount, this.transaction_per_day[1].Amount, this.transaction_per_day[2].Amount, this.transaction_per_day[3].Amount],
                        backgroundColor: [

                           'rgba(54, 162, 235, 1)',
                           'rgba(255, 206, 86, 1)',
                           'rgba(75, 192, 192, 1)',
                           'rgba(255, 99, 132, 1)'  
                        ],
                        borderColor: [
                           'rgba(54, 162, 235, 1)',
                           'rgba(255, 206, 86, 1)',
                           'rgba(75, 192, 192, 1)',
                           'rgba(255, 99, 132, 1)'                      
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    title : {
                        display : true,
                        text : "TRANSACTION GRAPH",
                        fontFamily: "sans-serif",
                        fontSize: 18
                    },
                }
            });
        }
        }).catch(e => {
            console.log(e)
        });
    },

Answer 1

您可以删除for循环并使用Array.map获取标签和数据

vm.transaction_per_day = response.data
var myChart = new Chart(ctxChart, {
  type: 'bar',
  data: {
    labels: vm.transaction_per_day.map(item => item.Day),
    datasets: [{
      label: 'Transaction per day',
      data: vm.transaction_per_day.map(item => item.Amount),
      backgroundColor: [

        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(255, 99, 132, 1)'
      ],
      borderColor: [
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(255, 99, 132, 1)'
      ],
      borderWidth: 1
    }]
  },
  options: {
    title: {
      display: true,
      text: "TRANSACTION GRAPH",
      fontFamily: "sans-serif",
      fontSize: 18
    },
  }
});

我如何使用Vue JS在Chart JS中循环数据

1 个答案: