データベースからデータをpiechartに取り込む方法は？

Question

私は動的に作成されたテーブルを持っていて、各行のビューボタンをクリックすると、特定の年の病気、休暇、妊婦、父親のようなカテゴリの日付まで人によって奪われた葉のない円グラフを持つモーダルが開きます。円グラフは

を示したが、私は第一以外のいずれかのボタンをクリックした場合、私は空白のページを取得する第一ボタンをクリックするだけでdatabase..andからデータを取得する方法を私を助けます。

<td> 
     <button type="button" class="btn btn-default btn-sm view" data-toggle="modal" data-target="#{{pl.id}}_3"><i class="fa fa-eye" aria-hidden="true" style="color:black"></i></button> 
     <!-- Modal --> 
     <div class="modal fade" id= "{{pl.id}}_3" role="dialog"> 
      <div class="modal-dialog"> 
      <!-- Modal content--> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
        <h4 class="modal-title"><b>{{pl.employee.emp_name|title }}</b> Leave Details</h4> 
       </div> 
       <div class="modal-body"> 
        <p>Applied leave from {{pl.start_date}} to {{pl.end_date}} for {{ pl.end_date|timeuntil:pl.start_date }} </p> 
        <p>Leave applied on : {{pl.date_created}}</p> 
        <p><div id="container" class="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div></p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
       </div> 
      </div> 
     </div> 
    </td> 

私のjqueryのコード：

$(document).on('click','.view', function(e){ 
     Highcharts.chart('container', { 
     chart: { 
     plotBackgroundColor: null, 
     plotBorderWidth: null, 
     plotShadow: false, 
     type: 'pie' 
     }, 
     title: { 
     text: 'Total number of leaves applied till now' 
      }, 
     tooltip: { 
     pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
       }, 
     plotOptions: { 
      pie: { 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: true, 
       format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
       style: { 
        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
         } 
        } 
       } 
      }, 
       series: [{ 
       name: 'Brands', 
       colorByPoint: true, 
      data: [{ 
       name: 'Sick Leaves', 
       y: 56.33 
        }, { 
       name: 'Casual Leaves', 
       y: 24.03, 
       sliced: true, 
       selected: true 
        }, { 
       name: 'Vacation Leaves', 
       y: 10.3 
        }, { 
       name: 'Maternity Leaves', 
       y: 4.77 
        }, { 
       name: 'Paternity Leaves', 
       y: 0.91 
      }] 
      }] 
     }); 
    }); 

Answer 1

モーダルフェードあなたは

を設定した時間を使って、あなたの関数を呼び出す必要がありますので、いくつかの時間遅延が新しい関数を作成しており、それをsetTimeout(function(){ myFunc(); }, 500);と呼んでください。これはあなたのモーダル上で動作します。