在bootstrap标签问题中绘制flot图表

Question

我试图在引导选项卡中使用一个flot图表,虽然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,并且图形被绘制得很好但是在其他选项卡选择上画布不会消失.

解.

我提醒一下,这是一个内置bootstrap默认选项卡bug的图表.它被绘制失真的原因是因为图表无法在隐藏的div中正确绘制(显示:无).

解决此问题有3个选项.

1. 添加一个javascript触发器,仅在选中图表的选项卡后绘制图表.
2. 不要使用引导程序,只需创建自己的选项卡脚本,该脚本将隐藏加载时的选项卡,并且在非选定选项卡上不显示display:none.

3. 简单的方法,与CSS

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

我希望这对某些人有用.

Answer 1

解决方案。

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

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

1. 添加一个 javascript 触发器，仅在选择了图表的选项卡之后绘制图表。
2. 不要使用引导程序，只需制作自己的选项卡脚本，该脚本将在加载时隐藏选项卡，并且在未选定的选项卡上默认不显示：none。

3. 简单的方法，用CSS

   标签{

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

   }

   tabid.active {

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

   }