Гистограмма не складывается

Я пытался адаптировать этот учебник, Как использовать Chart.js с Django, к моим отчетам по биллингу AWS. Я хочу подправить этот график из учебника:

Я хочу "сложить" расходы различных сервисов AWS за каждый месяц, но когда я попытался сложить расходы, то получил такой график:

Вот соответствующий код, который я написал:

monthly_cost/views.py:

from django.shortcuts import render
from django.db.models import Sum
from rest_framework import viewsets
from django.http import JsonResponse
from .models import MonthlyCostReport
from .serializers import MonthlyCostReportSerializer

def home(request):
    return render(request, 'home.html')

def product_cost_chart(request):
    colors = ['#DFFF00', '#FFBF00', '#FF7F50', '#DE3163', '#9FE2BF', '#40E0D0', '#6495ED', '#CCCCFF', '#9CC2BF',
              '#40E011', '#641111', '#CCCC00']
    labels = [label.get('bill_billing_period_start_date').strftime('%Y-%m-%d') for label in
              MonthlyCostReport.objects.values('bill_billing_period_start_date').order_by(
                  'bill_billing_period_start_date').distinct()]
    datasets = []

    for i, product_cost_pair in \
            enumerate(MonthlyCostReport.objects.filter(bill_billing_period_start_date=labels[0]).values(
                'line_item_product_code').annotate(product_cost=Sum('line_item_blended_cost')).order_by(
                '-product_cost')):
        dataset = {
            'label': product_cost_pair.get('line_item_product_code'),
            'backgroundColor': colors[i % len(colors)],
            'data': [pc.get('product_cost') for pc in MonthlyCostReport.objects \
                .filter(line_item_product_code=product_cost_pair.get('line_item_product_code')) \
                .values('line_item_product_code', 'bill_billing_period_start_date') \
                .annotate(product_cost=Sum('line_item_unblended_cost')).order_by('bill_billing_period_start_date')]
        }
        datasets.append(dataset)

    return JsonResponse(data={
        'labels': labels,
        'datasets': datasets,
    })

templates/home.html

{% block content %}

  <div id="container" style="width: 75%;">
    <canvas id="product-cost-chart" data-url="{% url 'product-cost-chart' %}"></canvas>
  </div>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>
  <script>

    $(function () {

      var $productCostChart = $("#product-cost-chart");
      $.ajax({
        url: $productCostChart.data("url"),
        success: function (data) {
          console.log(data);

          var ctx = $productCostChart[0].getContext("2d");

          new Chart(ctx, {
            type: 'bar',
            data: { labels: data.labels, datasets: data.datasets, },
            options: {
                plugins: { title: { display: true, text: 'Stacked Bar chart for pollution status' }, },
                scales: { x: { stacked: true, }, y: { stacked: true } }
            }
          });

        }
      });

    });

  </script>

{% endblock %}

Мое предположение заключается в том, что что-то не так с моим разделом "опции". Любая помощь была бы замечательной!

Спасибо

Вернуться на верх