Question

我有一个动态创建的表格，并且在每一行的点击视图按钮上打开一个模式，其中的饼图没有人们在特定年份的病假，假期，产假，亲子关系等类别中采用的叶子。请帮我如何从数据库中获取数据..点击第一个按钮，饼图显示

但如果我点击第1个以外的任何按钮，我会得到一个空白页面。

 <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);这将适用于您的模态。

如何从数据库中将数据导入饼图？

1 个答案: