Question

即使每个月没有数据，我也会显示所有月份。我使用SQL查询来获取所有有数据的月份，并使用VueJS查询所有没有数据的月份。问题是所有月份都先出现数据，而接下来的几个月是无数据。 label看起来像这样的April, May, June, July, August, January, February, March, September, October, November, December。如何根据日历对月份进行排序？有人可以帮我解决我的问题吗？这是我的代码。

方法

  retrieveDistributedPerMonthByLine : function() {
        var self = this;
        var months = ["January", 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

        axios.post(this.urlRoot + this.api + "retrieve_transaction_per_month.php")
        .then(response => {
            // console.log("m");
            console.log(response);

            vm.transaction_per_month = response.data

            for(var i = 0 ; i < months.length; i++) {
                var isFound = false;    
                for(var j = 0 ; j < this.transaction_per_month.length; j++) {
                    if(this.transaction_per_month[j].Month == months[i]) {
                        isFound = true;
                        break;
                    }
                }

                if(!isFound) {
                    this.transaction_per_month.push({
                        Month: months[i],
                        Amount: 0,
                        Beneficiary: 0,
                        Quantity: 0
                    });
                }
            }


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

                var myChart3 = new Chart(ctxChart, {
                    type: 'bar',
                    data: {
                        labels: vm.transaction_per_month.map(item => item.Month),
                        datasets: [{
                        label: 'Total Amount',
                        data: vm.transaction_per_month.map(item => item.Amount),
                        backgroundColor: this.poolColors(vm.distributed_per_day.length),
                        borderColor: '#eee',
                        borderWidth: 1
                    }]
                },
                reponsive: true,
                options: {
                    title : {
                        display : true,
                        text : "Distributed Reports per Month",
                        fontFamily: "sans-serif",
                        fontSize: 18
                    },
                    legend: {
                        display: false
                    },
                    tooltips: {
                        enabled: true
                    }
                }
            });
        }).catch(e => {
            console.log(e)
        });
    },

SQL

  public function getTransactionPerMonth() {
        $sql="SELECT DATE_FORMAT(tbl_transaction.transaction_date, '%M') 
        AS 
        Month, SUM(tbl_transaction_details.total_price) 
        AS 
            Amount, SUM(tbl_transaction_details.quantity)
        AS
            Quantity, COUNT(tbl_transaction.beneficiary_id)
        AS
            Beneficiary
        FROM    
            tbl_transaction_details 
        INNER JOIN 
            tbl_supplier_medicine ON tbl_transaction_details.supplier_medicine_id = tbl_supplier_medicine.supplier_medicine_id 
        INNER JOIN 
            tbl_transaction ON tbl_transaction.transaction_id = tbl_transaction_details.transaction_id
        INNER JOIN 
            tbl_barangay ON tbl_barangay.barangay_id = tbl_transaction.barangay_id
        WHERE    
            YEAR(tbl_transaction.transaction_date) = YEAR(NOW())
        AND 
            tbl_transaction_details.total_price > 0 
        AND 
            tbl_barangay.barangay_id = $_SESSION[barangay_id]
        GROUP BY 
            DATE_FORMAT(tbl_transaction.transaction_date, '%M')
        ORDER BY 
            MAX(tbl_transaction.transaction_date)";

        $stmt = $this->connection->prepare($sql);

        $stmt->execute();

        return $stmt->fetchAll();
    }

Answer 1

尝试一下：

    computed : {
          sorted_orders_by_months() {
          var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
          return this.transaction_per_month.sort(function(a, b){
             return months.indexOf(a.Month) - months.indexOf(b.Month.);
      });
    }
 }

然后要表示它，您可以执行以下操作：

v-for="(value, index) in sorted_orders_by_months"

如何按订单排序月份？

1 个答案: