Question

我正在尝试使用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>

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,

Bootstrap网格不能与canvas一起使用

2 个答案: