为什么图表不适用于Bootstrap模态？

这是我正在使用的Modal弹出Modals中的饼图。为什么图表不适用于Bootstrap模态？

HTML代码：

<div class="modal fade" id="viewPollingModal" tabindex="-1" role="dialog" aria-labelledby="viewPollingModal" aria-hidden="true" > 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button> 
     <h4 class="modal-title" id="myModalLabel">Survey</h4> 
     </div> 
     <div class="modal-body"> 
     <h3 id="appendQuestion"></h3> 
     <canvas id="pieChart" style="height:250px"></canvas> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div>

JavaScript代码：

$("#rpt-table").on('click', ".viewSurvey", function() { 
    event.preventDefault(); 
    var id = parseInt($(this).attr('attr')); 
    url = '{{ route("surveyResult", ":id") }}'; 
    url = url.replace(':id', id); 
    $.get(url, function(data, status){ 
    $('#appendQuestion').html(data.poll_questions.Question); 
    $('#viewPollingModal').modal('toggle'); 
    $("#modal").on('shown.bs.modal', function() { 
     var pieChartCanvas = $("#pieChart").get(0).getContext("2d"); 
     var pieChart = new Chart(pieChartCanvas); 
     var PieData = [ 
      { 
       value: 700, 
       color: "#f56954", 
       highlight: "#f56954", 
       label: "Chrome" 
      }, 
      { 
       value: 500, 
       color: "#00a65a", 
       highlight: "#00a65a", 
       label: "IE" 
      } 
     ]; 
     var pieOptions = { 
      segmentShowStroke: true, 
      segmentStrokeColor: "#fff", 
      segmentStrokeWidth: 2, 
      percentageInnerCutout: 50, 
      animationSteps: 100, 
      animationEasing: "easeOutBounce", 
      animateRotate: true, 
      animateScale: false, 
      responsive: true, 
      maintainAspectRatio: true, 
      legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>" 
     }; 
     pieChart.Doughnut(PieData, pieOptions); 
    }); 
    }); 
});

饼图不与引导模式（拉网）即使我使用 'shown.bs.modal' 工作。没有模式，它工作正常。

在此先感谢

来源

2017-03-12 hu7sy

有与'ID =“莫代尔”你的HTML元素没有'尝试改变$（“＃modal”）。on（'shown.bs.modal'，...'to'$（“＃viewPollingModal”）。on（'shown.bs.modal'...' – StaticBeagle

你能发表吗？一个jsfiddle或相当于？ – jordanwillis

@RatHat现在感谢它的工作 – hu7sy

在线$("#modal").on('shown.bs.modal', function() { ... });，没有与id="modal"在HTML中没有匹配的元素尝试改变$("#modal").on('shown.bs.modal', ...到$("#viewPollingModal").on('shown.bs.modal'...

来源

2017-03-14 12:25:13 StaticBeagle

为什么图表不适用于Bootstrap模态？

回答

相关问题