twitter-bootstrap 带有 Chart.js 折线图的 Bootstrap 模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27245270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Modal with Chart.js linechart
提问by Stillmatic1985
I have a Twitter Bootstrap 3 Modalwindow and i want to draw an Chart.jslinechart 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.
我有一个 Twitter Bootstrap 3 Modal窗口，我想在其中绘制一个Chart.js折线图。但是每次打开模态时，canvas 元素的高度和宽度均为 0。如果我更改这些值，则图表为空。似乎图表从未绘制过，但我没有收到任何控制台输出或错误。
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:
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
谢谢
回答by Stillmatic1985
It was the wrong event.
这是错误的事件。
$('#exampleModal').on('shown.bs.modal', function (event) {});
Works!
作品！
