元素在检查元素后显示

我使用AJAX创建图形并将其与弹出式窗体绑定。图形创建成功但不以模态显示，但如果我检查Google Chrome和Mozilla Firefox中的元素，则图形将显示在模态中。我的代码是元素在检查元素后显示

<div class="ibox-content"> 
    <div id="search_trens_graph" style="min-height: 100px;"> 
    <?php 
     if(!empty($trends)) { 
     foreach ($trends as $trend) { 
      $dates[] = $trend->month; 
      $num[] = $trend->trend; 
     } 
     } else { 
     $month = time(); 
     for ($i = 1; $i <= 12; $i++) { 
      $month = strtotime('last month', $month); 
      $months[] = date("M", $month); 
     } 

     $dates = array_reverse($months); 
     $num = array('50', '50', '50', '50', '50', '50', '50', '50', '50', '50', '50', '50') ; 
     } 
    ?>   
    <canvas id="lineChart" height="50" style="display:inline-block !important;"></canvas>  
    <script> 
     $(document).ready(function() { 
     var lineData = { 
      labels: <?php echo json_encode($dates); ?>, 
      datasets: [ 
      { 
       label: "Example dataset", 
       fillColor: "rgba(26,179,148,0.5)", 
       strokeColor: "rgba(26,179,148,0.7)", 
       pointColor: "rgba(26,179,148,1)", 
       pointStrokeColor: "#fff", 
       pointHighlightFill: "#fff", 
       pointHighlightStroke: "rgba(26,179,148,1)", 
       data: <?php echo json_encode($num); ?> 
      } 
      ] 
     }; 

     var lineOptions = { 
      scaleShowGridLines: true, 
      scaleGridLineColor: "rgba(0,0,0,.05)", 
      scaleGridLineWidth: 1, 
      bezierCurve: true, 
      bezierCurveTension: 0.4, 
      pointDot: true, 
      pointDotRadius: 4, 
      pointDotStrokeWidth: 1, 
      pointHitDetectionRadius: 20, 
      datasetStroke: true, 
      datasetStrokeWidth: 2, 
      datasetFill: true, 
      responsive: true, 
     }; 

     var ctx = document.getElementById("lineChart").getContext("2d"); 
     // console.log(ctx); 
     var myNewChart = new Chart(ctx).Line(lineData, lineOptions); 
     c3.generate({ 
      bindto: '#gauge', 
      data:{ 
      columns: [ 
       ['data', 68] 
      ], 
      type: 'gauge' 
      }, 
      color:{ 
      pattern: ['#bd362f', '#f9f9f9'] 
      } 
     }); 
     }); 
    </script> 
    </div> 
</div>

我不明白为什么这种情况发生。我如何解决这个问题。我还为canvas设置了显示内联块。因为如果不显示图形的原因是显示：无。但仍面临同样的问题。

感谢名单

来源

2017-10-12 Rajan Singh

它的固定我用beforeSend功能之前，阿贾克斯完成

$.ajax({ 
    type:'POST', 
    url:'your url', 
    data: 
    {your data}, 
    cache:true, 
    beforeSend:function(data){ 
     $("#keywordInfoModal .modal-body").html(ajaxloadbig); 
     $("#keywordInfoModal").modal('show'); 
    } 
    }).done(function(msg){ 
    $('#img_'+id).css('display','none'); 
    $("#search_count1_"+id).replaceWith(res.html); 
    $("#keywordInfoModal .modal-body").html(msg); 
    $("#keywordInfoModal").modal('show'); 
    })

来源

2017-10-12 10:35:35

元素在检查元素后显示

回答

相关问题