引导网格不适用于画布答案

【问题标题】：Bootstrap grid not working with canvas引导网格不适用于画布
【发布时间】：2013-07-18 10:23:23
【问题描述】：

我正在尝试使用 Chart.js 将图表放置在带有span6 的行上。 Chart.js 使用<canvas> 并且需要height 和width 属性。我已将height 设置为我需要的值，将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>

【问题讨论】：

标签： html twitter-bootstrap chart.js

【解决方案1】：

在您为图表添加所有选项的 JavaScript 文件中

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

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

【讨论】：

也检查一下：stackoverflow.com/questions/11894607/…
我之前将选项设置为空。要使用它们，我是否只需创建一个选项数组？ var options = [scaleOverride : true];?
你看过这个：chartjs.org/docs Line.defaults = { scaleOverride : true }
我有，但我不确定如何实现它（我是 JS 新手）。可以展示给我吗？我查看了示例代码，但没有一个实现选项。
谢谢。不幸的是，图表仍然没有拉伸以填充 div 的宽度。该选项只是设置图表上数据的比例，而不是图表本身的大小。

【解决方案2】：

我设法解决了你的问题！

请查看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、类、宽度和高度。

【讨论】：

如果您满意，请将此标记为已回答。