javascript - 在 bootstrap 选项卡问题中绘制图表

Question

我正在尝试在 bootstrap 选项卡中使用 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，图表绘制得很好，但在其他选项卡选择上 Canvas 不会消失。

解决方案。

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

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

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

3. 简单的方法，使用 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 个选项可以解决此问题。

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

3. 简单的方法，使用 css

   tabid {

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

   tabid.active {

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