Bootstrap Modal with Chart.js linechart

我有一个Twitter Bootstrap 3 Modal窗口，我想画一个Chart.js线图。但每次我打开模式时，画布元素的高度和宽度均为0.如果我更改这些值，则图表为空。它似乎是图表从未绘制，但我没有得到任何控制台输出或错误。Bootstrap Modal with Chart.js linechart

模态：

<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 type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-id="<?php echo $var["id"]; ?>">Open</button>

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

谢谢

来源

2014-12-02 Stillmatic1985

这是错误的事件。

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

工程！

来源

2014-12-02 11:34:59 Stillmatic1985

Bootstrap Modal with Chart.js linechart

回答

相关问题