Bootstrap網格不能與canvas一起使用

Question

我想放在與行使用chart.js之圖表span6 。 Chart.js使用<canvas>並需要height和width屬性。 我已經將height設置為我需要的width並將width為100％，但它不會拉伸以填充設置為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>

Answer 1

我設法解決了你的問題！

請檢查這個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，類，寬度和高度。

Answer 2

在JavaScript文件中，您可以在其中添加圖表的所有選項

new Chart(ctx).Line(data, options );

//Boolean - If we want to override with a hard coded scale
    scaleOverride : true,