DOTNET highchart asp.net与导航标签引导

-1

有东西，我想问一下，例如这是我的代码时，我想用这个基准来显示https://codepen.io/wizly/pen/BlKxo/ 与DOTNET highcharts或highchartsDOTNET highchart asp.net与导航标签引导

<div class="container"><h2>Example 3 </h2></div> 
     <div id="exTab3" class="container"> 
     <ul class="nav nav-pills"> 
      <li class="active"> 
       <a href="#1b" data-toggle="tab">Tab 1</a> 
      </li> 
      <li> 
       <a href="#2b" data-toggle="tab">Tab 2</a> 
      </li> 
     </ul> 

     <div class="tab-content clearfix"> 
      <div class="tab-pane active" id="1b"> 
       <div id=" chartContainerPies" style="width:100%;height:600px;"> 
        <asp:literal id="chartContainerPie" runat="server" ></asp:literal> 
       </div> 
      </div> 
      <div class="tab-pane" id="2b"> 
       <div id="chartContainerColumns" style="width:100%;height:500px;"> 
        <asp:Literal id="chartContainerColumn" runat="server"></asp:Literal> 
       </div> 
      </div> 
     </div> 
    </div>

，并从该编码的结果将在Web浏览器中

但是显示，第二导航选项卡结果成为这个。正如你所看到的，图表的大小被缩减为原始图表的50％。

的问题是如何使结果在第二个选项卡是与第一个标签清楚地相似？对这个问题的任何建议？非常感谢你

更新时间：后，我把边界，那么这就是结果

来源

2016-12-18 Faris Fajar

对于div id =“2b”，您可以将此样式：'style =“border：solid”'并查看div的边界位置，然后对此'id =“chartContainerColumns”执行此操作。我通常在开发过程中这样做，看看问题是什么。通常，它可以帮助我将问题缩小到特定项目。 – CodingYoshi

我已根据您的关注更新了结果。是因为活跃的课堂还是什么？ –

因此，显示它与其他选项卡的大小相同。现在对儿童控制器做同样的事情，看看哪一个是不同的，这样你就可以看到具体项目的问题是什么。 – CodingYoshi

这篇文章是在 Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

原因从ryenus直接回答

这不是Highcharts问题，至少不是本身，问题是由Bootstrap使用display：none来隐藏非活动标签：

.tab-content > .tab-pane, .pill-content > .pill-pane { 
    display: none;  /* this is the problem */ 
}

这会导致Highcharts无法获得预期的宽度来初始化图表，因此默认为600px。对于使用相同方法隐藏内容的其他工具也会发生这种情况。

一个纯CSS解决方案

而是围绕这一问题正在与一个额外的重绘或延迟初始化的，我们可以用高度达到隐藏的效果：0;溢出-γ：隐藏，这种方式隐藏的标签面板仍然存在，并且具有有效宽度：

/* bootstrap hack: fix content width inside hidden tabs */ 
.tab-content > .tab-pane:not(.active), 
.pill-content > .pill-pane:not(.active) { 
    display: block; 
    height: 0; 
    overflow-y: hidden; 
} 
/* bootstrap hack end */

更新：先前的两步骤溶液中的第一隐藏所有标签，然后使活性标签再次可见。相比之下，现在我们有一个单步解决方案，它直接针对非活动选项卡。

该解决方案是无缝的，因此您不必担心图表是否在选项卡内。而且它的效率很高，因为它首先解决了宽度问题，因此无需通过使用javascript调整大小/重绘/重排来解决宽度问题。

注意有关级联为了

这个补丁需要引导CSS后装载因为CSS层叠顺序的规则，总之，后者的规则获胜。

因此，对于在导航标签中放置多个图表时遇到同样问题的任何人，这将帮助您解决问题。

来源

2017-01-15 06:44:12

DOTNET highchart asp.net与导航标签引导

回答

相关问题