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

Question

我正在尝试在引导程序选项卡中使用 flot chart ，尽管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作为non的默认值 选定的标签。

3. 简单方法，使用css

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

我希望这对某些人有用。

Answer 1

解。

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

解决此问题有3个选项。

1. 添加一个javascript触发器，仅在选项卡后绘制图表 选择了图表。
2. 不要使用引导程序，只需创建隐藏的自定义选项卡脚本 加载时的选项卡，并且没有display：none作为non的默认值 选定的标签。

3. 简单方法，使用css

   tabid {

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

   }

   tabid.active {

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

   }