如何在模型中的每個字段實現chart.js？ Django

Question

我正在創建一個用戶可以比較兩架飛機的飛機比較網站。在我的飛機模型中，我有幾個領域，如範圍，乘客，速度等 - 所有這些領域是數字允許進行比較。

Models.py

​​

這是我比較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>