html - PieChar里面for循环标记html django

Question

我正面临在我的 html 页面中创建多个饼图的挑战。

我在页面中有一个 for 循环，我想绘制数据。

我只是将脚本插入循环中，但它不起作用。

代码是：

{% for welTsts in WellTsTProDChart %}
   
    <div id='{{welTsts.TestDate}}' class="container">
              <div class="row">
                  <div class="col-lg-6">
              </div></div>
    
    
                 <div class="col-lg-6">
                     <div class="card card-success">
                         <div class="card-header">
                           <h3 class="card-title">Production Tests: {{ welTsts.TestDate }} Oil {{ welTsts.TestOIL}} (m3/D)</h3>
                         </div>
                         <div class="card-body w3-light-grey solid">
                         
                           <canvas id='{{welTsts.TestDate}}' style="min-height: 230px; height: 230px; max-height: 245px; max-width: 100%;"</canvas>
                    
                                   {% block custom_js %}
                                   <script>
                                       $(document).ready(function(){
                                               //Data Set for PIE CHart
                                              var pieData  = {
                                                 labels: [
                                                     'OIl',
                                                     'Water'
                                                 ],
                                                 datasets: [
                                                   {
                                                     data: [{{ welTsts.TestOIL}} , {{ welTsts.TestWtr}}],
                                                     backgroundColor : ['#00a65a', '#5088f1'],
                                                   }
                                                 ]
                                               }
                                               var pieChartCanvas = $('#{{welTsts.TestDate}}').get(0).getContext('2d')
                                               var pieOptions     = {
                                                 maintainAspectRatio : false,
                                                 responsive : true,
                                               }
                                               //Create pie or douhnut chart
                                               // You can switch between pie and douhnut using the method below.
                                               var pieChart = new Chart(pieChartCanvas, {
                                                 type: 'pie',
                                                 data: pieData,
                                                 options: pieOptions
                                               })
                                       })
                                   </script>
                                    {% endblock custom_js %}
    </div></div></div></div></div>
    {% endfor %}

当我只有一个数据时，它不知道变量（数据：[{{ welTsts.TestOIL}}，{{ welTsts.TestWtr}}]），如果我设置固定数字，如数据：[70, 30] 它会绘制它只是一个情节，即使有很多情节要显示如下图所示。它将脚本中的最后一个 var 放入 for 循环的第一个元素中！