元素在檢查元素後顯示

我使用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

元素在檢查元素後顯示

回答

相關問題