javascript - 如何用模型中的每个字段实现chart.js？ Django

Question

我正在创建一个飞机比较网站，用户可以在其中比较两架飞机。在我的飞机模型中，我有几个字段，例如航程、乘客、速度等 - 所有这些字段都是数字，可以进行比较。

模型.py

class Aircraft(AircraftModelBase):
    engines = models.PositiveSmallIntegerField(default=1)
    cost = models.DecimalField(max_digits=8, decimal_places=3)
    maximum_range = models.PositiveSmallIntegerField()
    passengers = models.PositiveSmallIntegerField()
    maximum_altitude = models.PositiveIntegerField()
    cruising_speed = models.PositiveIntegerField()
    fuel_capacity = models.DecimalField(max_digits=6, decimal_places=2)
    wing_span = models.PositiveSmallIntegerField(default=1)

这是我用于比较的 view.py:

def aircraft_delta(request):
  ids = [id for id in request.GET.get('ids') if id != ',']
  aircraft_to_compare = Aircraft.objects.filter(id__in=ids)
  property_keys = ['image', 'name', 'maximum_range', 'passengers',
    'cruising_speed', 'fuel_capacity']
  column_descriptions = {
    'image': '',
    'name': 'Aircraft',
    'maximum_range': 'Range (NM)',
    'passengers': 'Passengers',
    'cruising_speed': 'Max Speed (kts)',
    'fuel_capacity': 'Fuel Capacity'
  }
  data = []

  for key in property_keys:
    row = [column_descriptions[key]]

    first_value = getattr(aircraft_to_compare[0], key)
    second_value = getattr(aircraft_to_compare[1], key)

    if key not in ['image', 'name']:
      delta = first_value - second_value
    else:
      delta = ''

    row.append(first_value)
    row.append(delta)
    row.append(second_value)

    data.append(row)

  return render(request, 'aircraft/delta.html', {
    'data': data
  })

我所做的方法是将每个飞机字段附加到一行中，并且该行显示在模板中。

我想为以下每个字段添加图表，但我不知道如何执行此操作。举例说明我的意思

这就是当前的样子:

            -----------------------------------
            | B777     | Difference  | A380   |
            -----------------------------------       
     Range:|  6463NM   |    646NM    | 7435NM |
Passengers:|  235      |    54       |   442  |  

但我理想想要的是这样的:

            -----------------------------------
            | B777     | Difference  | A380   |
            -----------------------------------       
     Range:|  6463NM   |    646NM    | 7435NM |
           -------------------------------------
           |                                   |
           |                                   |
           |          Chart.js showing         |
           |        the range difference       |
           |                                   |
           -------------------------------------

           -------------------------------------
Passengers:|  235      |    54       |   442    |  
           -------------------------------------
           |                                   |
           |                                   |
           |          Chart.js showing         |
           |        the passenger difference   |
           |                                   |
           -------------------------------------

           -------------------------------------
     Speed:|  0.85 Mach|    3   |   0.82 Mach|  
           -------------------------------------
           |                                   |
           |                                   |
           |          Chart.js showing         |
           |        the speed difference       |
           |                                   |
           -------------------------------------

Answer 1

你的 JavaScript 代码在哪里？

  Here is my php code you can have idea from here
    <script>
      var client="<?php echo $count_client; ?>";
      var lead="<?php echo $count_lead; ?>";
      var lead_inactive="<?php echo $count_lead_inactive; ?>";
      var suspended="<?php echo $count_suspended; ?>";
      var prospect="<?php echo $count_prospect; ?>";
      var inactive="<?php echo $count_inactive; ?>"; 

      var pending_invoice_balance="<?php echo $count_balance; ?>";


var clientdata = function() {
       return (parseFloat(client));
};
var leaddata = function() {
       return (parseFloat(lead));
};

var lead_inactivedata = function() {
       return (parseFloat(lead_inactive));
};
var suspendeddata = function() {
       return (parseFloat(suspended));
};
var prospectdata = function() {
       return (parseFloat(prospect));
};
var inactivedata = function() {
       return (parseFloat(inactive));
};

var pendingbalance = function() {
       return (parseFloat(client));
};

var config = {
    type: 'pie',
    data: {
        datasets: [{
            data: [
                clientdata(),
                inactivedata(),
                leaddata(),
                lead_inactivedata(),
                prospectdata(),
                suspendeddata(),
            ],
            backgroundColor: [
             "#00FF00",
            "#e50000",
            "#ffa500",
           "#00FF00",
           "#0000FF",
           "#4B0082",
            ],
            label: 'Dataset 1'
        }],
        labels: [
        "Client",
        "Inactive",
        "Lead",
        "Lead/Inactive",
        "Prospect",
        "Suspended",
        ]
    },
    options: {
        responsive: true,
        legend: {
          position: 'top',
        },
        title: {
            display: true,
            text: 'Status'
        },
        animation: {
            animateScale: true,
            animateRotate: true
        }
    }
};
   var ctx = document.getElementById("chart-area").getContext("2d");
    window.myDoughnut = new Chart(ctx, config); 
   </script>