twitter-bootstrap Bootstrap 网格不适用于画布
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17740901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap grid not working with canvas
提问by acudars
I'm trying to place a chart using Chart.js on a row with span6. Chart.js uses <canvas>and needs a heightand widthproperty. I've set the heightto what I need and the widthto 100% but it doesn't stretch to fill the div which is set to span6.
我正在尝试使用 Chart.js 将图表放置在带有span6. Chart.js 使用<canvas>并需要一个heightandwidth属性。我已将 设置height为我需要的值，并将 设置width为 100%，但它不会拉伸以填充设置为 的 div span6。
Any ideas?
有任何想法吗？
<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>
回答by acudars
I managed to solve your problem!
我设法解决了你的问题！
Please check this jsFiddle.
请检查这个jsFiddle。
Try resizing the panels to see it in action.
尝试调整面板大小以查看其实际效果。
Basically, you call a function that responds to the resize of the window:
基本上，您调用一个响应窗口大小调整的函数：
$(window).resize(respondCanvas);
that triggers a fetch of the width and height of the parent element that it is encapsulated in and then redraws your chart.
这会触发对封装在其中的父元素的宽度和高度的获取，然后重新绘制图表。
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);
}
You can adjust all tiny bits like your own IDs, classes, width and heights.
您可以调整所有微小的位，例如您自己的 ID、类、宽度和高度。
回答by acudars
in the JavaScript file where you add all the options for the chart
在 JavaScript 文件中添加图表的所有选项
new Chart(ctx).Line(data, options );
//Boolean - If we want to override with a hard coded scale
scaleOverride : true,
