Question

由于某种原因，我的chart.js折线图不会显示在我的引导模式中：

HTML：

此链接调用我的引导模式

<a class="button" id="popup1link" href="#modal" data-toggle="modal">
  <div class="col-xs-6 col-sm-4 hvr-grow placeholder">
   <div id="chart">
    <div><img class="img-responsive" src="/images/cumulativeline.png" alt=""/></div>
   </div>
   <h4 class="bold">Velocity</h4>
   <span class="text-muted">User Velocity</span>
 </div>
</a>

我的模态HTML：

<div class="modal fade" id="modal" role="dialog">
<div class="modal-dialog">
  <div class="modal-content">
        <div class="modal-header">
          <h>Modal Header</h>
          <div class="modal-body">
            <p>
              <h3>Velocity</h3>
               <br>
                <canvas id="canvas" width="400" height="400"></canvas>
                <p>This text shows up but the chart doesn't...</p>
            </p>
          </div>
          <div class="modal-footer">
            <p>footer</p>
          </div>
        </div>
    </div>
  </div>
</div>

我的JS档案：

$("#modal").on('show.bs.modal', function() {
    console.log('create modal line in progress'); //this console logs out properly 

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            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: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

var ctx = $("#canvas").get(0).getContext("2d");
var myLineChart = new Chart(ctx).Line(data);

});

有人可以帮忙吗？

Answer 1

更改

$("#modal").on('show.bs.modal', function() { }

show.bs.modal在即将显示模态时发生

到

$("#modal").on('shown.bs.modal', function() {}

shown.bs.modal在模式完全显示时发生。

将提供足够的空间来渲染/绘制图表并以模态显示输出。

Bootstrap模式不使用chartjs线图

1 个答案: