html - Bootstrap网格不适用于 Canvas

我正在尝试将Chart.js的图表与span6放在一行上。 Chart.js使用<canvas>，并且需要height和width属性。我已将height设置为所需的值，并将width设置为100％，但它不会拉伸(stretch)以填充设置为span6的div。

有任何想法吗？

<div class="row" style="padding-top: 20px;">
  <div class="span6">
    <div id="daily">
      <canvas id="daily-chart" width="100%" height="400px"></canvas>
    </div>
  </div>
</div>

最佳答案

我设法解决了您的问题!

请检查此jsFiddle。

尝试调整面板的大小以查看实际效果。

基本上，您调用一个函数来响应窗口的调整大小:

$(window).resize(respondCanvas);

触发获取封装在其中的父元素的宽度和高度，然后重绘图表。

function respondCanvas() {
    c.attr('width', jQuery("#daily").width());
    c.attr('height', jQuery("#daily").height());
    //Call a function to redraw other content (texts, images etc)
    myNewChart = new Chart(ct).Bar(data, options);
}

您可以调整所有微小的部分，例如您自己的ID，类别，宽度和高度。

关于html - Bootstrap网格不适用于 Canvas ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17740901/