Javascript 如何在Django中呈现图表js的多个数据集？

我的看法是：

from django.shortcuts import render
from django.apps import apps

Item = apps.get_model('inventory', 'Item')
Cancellations = apps.get_model('cancellations', 'Cancellations')

def chart_display(request):
    labels = []
    data = []

    queryset = Item.objects.all()
    for item in queryset:
        labels.append(item.item_name)
        data.append(item.quantity)

    data = {
        'inv_labels': labels,
        'inv_data': data,
    }

    return render(request, 'pie_chart.html', data)

我的HTML：

<div class="grid-container">
     <div class="inv-class">
     <h2>Inventory Stats</h2>
     <canvas id="inventory-chart"></canvas>
     </div>

     <div class="item2">
     <h2>Cancellation Stats</h2>
     <canvas id="layanan_subbagian"></canvas>
     </div>
</div>

 <script>
 $(function () {
         var data = {
            type: 'bar',
              data: {
                datasets: [{
                  data: {{ inv_data|safe }},
                  backgroundColor: [
                    '#3c8dbc',
                    '#f56954',
                    '#f39c12',
                    '#ff0000',
                    '#008000',
                  ],
                  label: 'Quantity'
                }],
                labels: {{ inv_labels|safe }}
              },
              options: {
                responsive: true
                }
            };
        window.onload = function() {
          var ctx = document.getElementById('inventory-chart').getContext('2d');
          window.myPie = new Chart(ctx, data);
        }
    });
  </script
  {% endblock content%}

和HTML至：

var data = {
            type: 'bar',
              data: {
                datasets: [{
                  data: {{ inv_data|safe }},
                  backgroundColor: [
                    '#3c8dbc',
                    '#f56954',
                    '#f39c12',
                    '#ff0000',
                    '#008000',
                  ],
                  label: 'Quantity'
                }],
                labels: {{ inv_labels|safe }}
              },
              options: {
                responsive: true
                }
            };

            var data2 = {
            type: 'bar',
              data: {
                datasets: [{
                  data: {{ can_data|safe }},
                  backgroundColor: [
                    '#3c8dbc',
                    '#f56954',
                    '#f39c12',
                    '#ff0000',
                    '#008000',
                  ],
                  label: 'Cancellations'
                }],
                labels: {{ can_labels|safe }}
              },
              options: {
                responsive: true
                }
            };



        window.onload = function() {
          var ctx = document.getElementById('inventory-chart').getContext('2d');
          window.myPie = new Chart(ctx, data);

          var ctx2 = document.getElementById('layanan_subbagian').getContext('2d');
          window.myPie2 = new Chart(ctx2, data2)
        }

我只想用一种简单的方法显示两个不同模型的两个图表。最好的方法是什么

var data = {
            type: 'bar',
              data: {
                datasets: [{
                  data: {{ inv_data|safe }},
                  backgroundColor: [
                    '#3c8dbc',
                    '#f56954',
                    '#f39c12',
                    '#ff0000',
                    '#008000',
                  ],
                  label: 'Quantity'
                }],
                labels: {{ inv_labels|safe }}
              },
              options: {
                responsive: true
                }
            };

            var data2 = {
            type: 'bar',
              data: {
                datasets: [{
                  data: {{ can_data|safe }},
                  backgroundColor: [
                    '#3c8dbc',
                    '#f56954',
                    '#f39c12',
                    '#ff0000',
                    '#008000',
                  ],
                  label: 'Cancellations'
                }],
                labels: {{ can_labels|safe }}
              },
              options: {
                responsive: true
                }
            };



        window.onload = function() {
          var ctx = document.getElementById('inventory-chart').getContext('2d');
          window.myPie = new Chart(ctx, data);

          var ctx2 = document.getElementById('layanan_subbagian').getContext('2d');
          window.myPie2 = new Chart(ctx2, data2)
        }