在 bootstrap 选项卡问题内绘制图表

Question

我正在尝试在 bootstrap 选项卡中使用图表，尽管 javascript 没有正确绘制图表，但它被画歪了，文字离图表太近了..

<div id="tab3" class="tab-pane fade">
<div class="chart_flot" style="width:600px;height:300px;"></div>
</div>

在选项卡之外，图表工作正常。我试过使用 css，但我发现的唯一解决方案是在选择选项卡之前不将选项卡样式 (display:none) 设置为默认值，例如：

<div id="tab3" class="tab-pane fade" style="display:block">
<div class="chart_flot" style="width:600px;height:300px;"></div>
</div>

我尝试在用于图表的选项卡上设置 display:block，图表绘制得很好，但在其他选项卡选择上 canvas 不会消失。

解.

我提醒一下，这是 bootstrap 默认选项卡中的图表错误。它被绘制扭曲的原因是因为图表无法在隐藏 div ( display:none ) .

中正确绘制

有 3 个选项可以解决此问题。

添加一个 javascript 触发器，仅在选项卡之后绘制图表选中图表。
不要使用 bootstrap 并且只制作自己的标签脚本来隐藏加载时的选项卡并且没有 display:none 作为非默认选定的标签。

简单的方法，css

#tabid {
    width:0;
    display:block;
    visibility:hidden;
    height:0;
}
#tabid.active {
    width:100%;
    height:100%;
    visibility:visible;
}

我希望这对某些人有用。

Answer 1

解决方案。

我提醒一下，这是 bootstrap 默认选项卡中的图表错误。它被绘制扭曲的原因是因为图表无法在隐藏的 div ( display:none ) 中正确绘制。

有 3 个选项可以解决此问题。

添加一个 javascript 触发器，仅在选项卡之后绘制图表选择图表。
不要使用 bootstrap 并且只制作自己的标签脚本来隐藏加载选项卡并且没有 display:none 作为非默认选定的标签。

简单的方法，css

禁忌{

width:0;
display:block;
visibility:hidden;
height:0;

}

tabid.active {

width:100%;
height:100%;
visibility:visible;

}

在 bootstrap 选项卡问题内绘制图表

drawing flot chart inside bootstrap tab issue

javascript

charts

tabs

flot

twitter-bootstrap

禁忌{

tabid.active {