如何使用VueJS和ChartJS在条形图中显示每月的总交易量？

Question

我正在使用VueJS和ChartJS创建条形图。我想显示每个月的总交易并将其显示在条形图中。问题是，当我将数据值更改为transaction_per_month时，数据来自数据库，它什么也没显示。如何显示每个月的total_price的总和？有人可以帮我解决我的问题吗？

SQL查询

  public function getTransactionPerMonth() {
        $sql="SELECT SUM(tbl_transaction_details.total_price) 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 tbl_barangay.barangay_id = $_SESSION[barangay_id]
        GROUP BY 
        DATE_FORMAT(tbl_transaction. transaction_date, '%Y-%m')";

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

        $stmt->execute();

        return $stmt->fetchAll();
    }

方法

  chartPerMonth : function(canvas2, type, transaction_per_month) {
        let chart = new Chart(canvas2, {
            type : type,
            data : {
                labels : ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                datasets : 
                [
                    {
                        label: "Revenue Per Month",
                        data : [transaction_per_month],
                        backgroundColor: [
                            "#007bff",
                        ],
                        hoverBackgroundColor: [
                            "#007bff"
                        ]

                    }
                ]
            },
            options : {
                responsive : true,
                animation : {
                    animateScale : true
                },
                legend: {
                    labels : {
                        fontColor: '#000',
                        fontSize: 9,
                        fontFamily: "sans-serif",
                        fontStyle: "bold"
                    }
                }
            }
        });
    },

  retrieveTransactionPerMonth : function() {
        axios.get(this.urlRoot + this.api + "retrieve_transaction_per_month.php")
        .then(function (response) {
            vm.transaction_per_month = response.data;

            vm.chartPerMonth(vm.$refs.canvas2, 'bar', vm.transaction_per_month);
            console.log(response);
        });
    }
  },

  created() {
    this.retrieveTransactionPerMonth();
}