Question

我有一个动态创建的表格，并且在每一行的点击视图按钮上打开一个模式，其中的饼图没有人们在特定年份的病假，假期，产假，亲子关系等类别中采用的叶子。点击第一个按钮，饼图显示https://imgur.com/a/wpNa3，但是如果我点击第1个以外的任何按钮，那么我会得到一个空白页面。https://imgur.com/a/jcZjE。为什么出现空白页面？请帮助我。

<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
        }]
      }]
   });
 });

由于ID中的重复，我在点击时使用了classname，但仍然无法正常工作...我在哪里做错了？

PieChart为动态创建的表中的每一行

0 个答案: