[英]Why chart is not working with Bootstrap Modal?
這是我用來在彈出的Modals中制作餅圖的Modal。
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”,餅圖也無法與Bootstrap模態(彈出窗口)一起使用。 沒有模式,它工作正常。
提前致謝
在線$("#modal").on('shown.bs.modal', function() { ... });
,HTML中沒有id="modal"
匹配元素,請嘗試將$("#modal").on('shown.bs.modal', ...
更改$("#viewPollingModal").on('shown.bs.modal'...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.