bootstrap 的冰沙图表

Question

这可能很明显，但我正在尝试将冰沙图表放入 bootstrap col。图表不会展开以填充该列，我只是得到一个带有很多额外 space.

的小图表

这是我当前的代码：

<div class="container-fluid">
        <div class="row">
            <div class="col">
                <canvas id="mycanvas" width="100%" height="300px"></canvas>
            </div>
            <div class="col"></div>
            <div class="col"></div>
        </div>
    </div>

JS:

var smoothie = new SmoothieChart({millisPerPixel:25,grid:{millisPerLine:3000,verticalSections:8},timestampFormatter:SmoothieChart.timeFormatter, tooltip: true});
smoothie.streamTo(document.getElementById("mycanvas"), 0);

我希望图表填充该列的其余部分 space，知道我做错了什么吗？

Answer 1

对我来说，创建一个 class 作为 canvasheight 然后在 Style 标签中定义高度有效

<div class="container-fluid">
    <div class="row">
        <div class="col">
            <canvas id="mycanvas" class="canvaswidth" height="300px"></canvas>
        </div>
        <div class="col"></div>
        <div class="col"></div>
    </div>
</div>

<style>
.canvaswidth{
   width:100% !important;
}
</style>

bootstrap 的冰沙图表

Smoothie chart with bootstrap

html

javascript

css

twitter-bootstrap

smoothie.js