Bootstrap Modal 与 Chart.js 折线图

我有一个推特Bootstrap 3 模态 http://getbootstrap.com/javascript/#modals窗口，我想画一个Chart.js https://github.com/nnnick/Chart.js里面的折线图。但每次我打开模态时，画布元素的高度和宽度均为 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">&times;</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>

缺什么？为什么图表永远不会被绘制？

Thanks

这是错误的事件。

$('#exampleModal').on('shown.bs.modal', function (event) {});

Works!