Bootstrap模式与Chart.js线图 [英] Bootstrap Modal with Chart.js linechart
本文介绍了Bootstrap模式与Chart.js线图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个Twitter Bootstrap 3 Modal 窗口,我要绘制一个 Chart.js 线图。但每次我打开模态,canvas元素的高度和宽度为0.如果我改变这些值,图表是空的。它似乎图表从来没有绘制,但我没有得到任何控制台输出或错误。
Modal:
< div class =modal fadeid =exampleModaltabindex = - 1role =dialogaria-labelledby =exampleModalLabel hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modal>< span aria-hidden =true>& times;< / span>< span class =sr-only>关闭< / span>< / button>
< h4 class =modal-titleid =exampleModalLabel>新讯息< / h4>
< / div>
< div class =modal-body>
< p>文字< / p>
< canvas id =canvaswidth =400height =400>< / canvas>
< p>文字< / p>
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button>
< / div>
< / div>
< / div>
< / div>
Javascript :
$('#exampleModal')。on('show.bs.modal',function(event){
var button = $(event。 relatedtarget);
var modal = $(this);
var canvas = modal.find('。modal-body canvas');
//图表初始化
var ctx = canvas [0] .getContext(2d);
var chart = new Chart(ctx).Line({
labels:[January,February,March ,April,May,June,July],
datasets:[
{
fillColor:rgba(190,144,212,0.2),
strokeColor :rgba(190,144,212,1),
pointColor:rgba(190,144,212,1),
pointStrokeColor:#fff,
pointHighlightFill:#fff,
pointHighlightStroke:rgba(220,220,220,1),
data:[65,59,80,81,56,55,40]
},
{
fillColor: rgba(151,187,205,0.2),
strokeColor:rgba(151,187,205,1),
pointColor:rgba(151,187,205,1),
pointStrokeColor:#fff
pointHighlightFill:#fff,
pointHighlightStroke:rgba(151,187,205,1),
data:[65,59,80,81,56,55,40]
}
]
},{});
});
按钮:
< button type =buttonclass =btn btn-primarydata-toggle =modaldata-target =#exampleModaldata-id = ?php echo $ var [id];?>>打开< / button>
缺少什么?为什么图表永远不会绘制?
感谢
解决方案错误的事件。
$('#exampleModal')。on('shown.bs.modal',function {});
工程!
I have a Twitter Bootstrap 3 Modal window and i want to draw an Chart.js linechart in it. But every time i open the modal the canvas element has a height and a width of 0. If i change these values the chart is empty. it seems like the chart is never drawn but i doesnt get any console output or errors.
Modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title" id="exampleModalLabel">New message</h4> </div> <div class="modal-body"> <p>Text</p> <canvas id="canvas" width="400" height="400"></canvas> <p>Text</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
Javascript:
$('#exampleModal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget); var modal = $(this); var canvas = modal.find('.modal-body canvas'); // Chart initialisieren var ctx = canvas[0].getContext("2d"); var chart = new Chart(ctx).Line({ labels: ["January", "February", "March", "April", "May", "June", "July"], datasets: [ { fillColor: "rgba(190,144,212,0.2)", strokeColor: "rgba(190,144,212,1)", pointColor: "rgba(190,144,212,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(220,220,220,1)", data: [65, 59, 80, 81, 56, 55, 40] }, { fillColor: "rgba(151,187,205,0.2)", strokeColor: "rgba(151,187,205,1)", pointColor: "rgba(151,187,205,1)", pointStrokeColor: "#fff", pointHighlightFill: "#fff", pointHighlightStroke: "rgba(151,187,205,1)", data: [65, 59, 80, 81, 56, 55, 40] } ] }, {}); });
Button:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="<?php echo $var["id"]; ?>">Open</button>
What is missing? Why the chart never gets drawn?
Thanks
解决方案It was the wrong event.
$('#exampleModal').on('shown.bs.modal', function (event) {});
Works!
这篇关于Bootstrap模式与Chart.js线图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文