Bootstrap网格不能与canvas一起使用

Question

我正在尝试使用Chart.js放置一个图表span6.Chart.js使用<canvas>并需要a height和widthproperty.我已经设置了height我需要的和width100%,但它没有拉伸来填充设置的div span6.

有任何想法吗？

<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,