我正在构建一个预算跟踪器应用程序，在 Jmeter 板页面中，我想列出不同的图表。饼图是用于费用结构，显示在某些类别中花费了多少费用。我主要面临两个问题。第一个问题是视图中的模型数据没有通过结果图未显示的模板。第二个问题是我试图显示某些类别的费用比例。不是每项费用的一个比例（如果它们属于同一类别，则必须计算累积费用的总和）。如果我能得到帮助，我将不胜感激。
models.py

class Transaction(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE)
TRANSACTION_CHOICES = [
    ('Expense','Expense'),
    ('Income','Income'),
]
transaction_type = models.CharField(max_length=10, blank=False, choices=TRANSACTION_CHOICES, default="Expense",null=True)
title = models.CharField(blank = False, max_length=30)
description = models.CharField(blank = True, max_length=200)
amount = models.DecimalField(blank=False, max_digits=10, decimal_places=2)
date_paid = models.DateField(auto_now_add=False, blank=True, null=True)
time_paid = models.TimeField(auto_now_add=False, blank=True, null=True)
CATEGORY_CHOICES = [
('Groceries', 'Groceries'),
('Salary', 'Salary'),
('Bills', 'Bills'),
('Rent', 'Rent'),
('Gym', 'Gym'),
('Restaurant', 'Restaurant'),
('Vacation', 'Vacation'),
('Travel', 'Travel'),
('Gift', 'Gift'),
('Investments', 'Investments'),
('Savings', 'Savings'),
('Entertainment', 'Entertainment'),
('Internet', 'Internet'),
('Healthcare', 'Healthcare'),
('Lifestyle', 'Lifestyle'),
('Insurance', 'Insurance'),
('Other', 'Other'),
]
category = models.CharField(max_length=50, blank=False, choices=CATEGORY_CHOICES)
receipt = models.ImageField(upload_to='receipt_images', blank = True)
def __str__(self):
    return self.title
def receipt_url(self):
    if self.receipt and hasattr(self.receipt, 'url'):
        return self.receipt.url

views.py

def expense_structure(request):
#qs = Transaction.objects.values('category').annotate(total_amount=Sum('amount')).order_by('category')
# Retrieve user's transactions
transactions = Transaction.objects.filter(user=request.user).order_by('date_paid')
# Extract data for graph
labels = []
data = []
expense = 0
for transaction in transactions:
    labels.append(transaction.date_paid.strftime("%m/%d/%Y"))
    if transaction.transaction_type == "Expense":
        expense = transaction.amount
    else:
        expense != transaction.amount
    data.append(expense)
# Create chart data
return JsonResponse(data={
    'labels': labels,
    'data': data,
})

expense_structure.html

{% extends 'base_content.html' %}
{% block content %}
<div class="col-sm-4 text-center my-3">
     <div class="card">
         <div class="card-header">
             <h4 class="card-title">Expense Structure</h4>
          </div>
          <canvas id="expense_structure" data-url="{% url 'expense_structure' %}"></canvas>
            <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
            <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
            <script>
                $(function () {
                    var $expense_structure = $("#expense_structure");
                    $.ajax({
                        url: $expense_structure.data("url"),
                        success: function (data) {
                            var ctx = $expense_structure[0].getContext("2d");
                            new Chart(ctx, {
                                type: 'bar',
                                data: {
                                labels: data.labels,
                                datasets: [{
                                    label: 'Expenses',
                                    backgroundColor: 'blue',
                                    data: data.data
                                }]          
                                },
                                options: {
                                responsive: true,
                                legend: {
                                    position: 'top',
                                },
                                title: {
                                    display: true,
                                    text: 'Expense Structure Bar Chart'
                                }
                                }
                            });
                            }
                        });
                        });
             </script>
 </div>
{% endblock %}