Question

I am creating a graph using AJAX and bind it with a popup. Graph creates successfully but not displaying in modal but if I inspect element in both Google Chrome and Mozilla Firefox then graph appears in the modal. My code is

<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>

I don't understand why this happening. How I resolve this. I also set display inline-block for canvas. Because if reason of not displaying graph was display:none. but still facing same problem.

Thanx

Answer 1

修复了我在ajax完成之前使用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');
    })

Element is displaying after inspect element

1 个答案: