html - 引导网格不适用于画布

Question

我正在尝试使用 Chart.js 将图表放置在带有span6. Chart.js 使用<canvas>并需要一个heightandwidth属性。我已将 设置height为我需要的内容并将 设置width为 100%，但它不会拉伸以填充设置为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,