这可能很明显,但我正在尝试将冰沙图表放入 Bootstrap col
中。图表不会展开以填满该列,我只是得到一个带有大量额外空间的小图表。
这是我当前的代码:
<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);
我希望图表填充其余的列空间,知道我做错了什么吗?
最佳答案
对我来说,创建一个类作为 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>
关于javascript - 带有 bootstrap 的 Smoothie 图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51164188/