[英]Why chart is not working with Bootstrap Modal?
This is Modal I am using to make Pie charts in pop up Modals. 这是我用来在弹出的Modals中制作饼图的Modal。
HTML Code: 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 Code: 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);
});
});
});
Pie Chart is not working with Bootstrap modal (Pop Up) even though I am using 'shown.bs.modal'. 即使我使用的是“ shown.bs.modal”,饼图也无法与Bootstrap模态(弹出窗口)一起使用。 Without modal it is working fine.
没有模式,它工作正常。
Thanks in advance 提前致谢
On line $("#modal").on('shown.bs.modal', function() { ... });
在线
$("#modal").on('shown.bs.modal', function() { ... });
, there is no matching element in the HTML with id="modal"
try changing $("#modal").on('shown.bs.modal', ...
to $("#viewPollingModal").on('shown.bs.modal'...
,HTML中没有
id="modal"
匹配元素,请尝试将$("#modal").on('shown.bs.modal', ...
更改$("#viewPollingModal").on('shown.bs.modal'...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.