C# dotnet highchart asp.net与导航选项卡引导

我想问一些问题，例如，当我想使用此引用显示时，这是我的代码 使用dotnet highcharts或highcharts

 <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>

示例3







但是，第二个nav tab结果变为此。如您所见，图表的大小缩小为原始图表的50%


问题是如何使第二个选项卡中的结果与第一个选项卡中的结果明显相似？对这个问题有什么建议吗？多谢各位

更新：
在我把边界放好之后，这就是结果
这篇文章是莱恩努斯在年的直接回答

原因

这不是Highcharts问题，至少不是它本身的问题，问题是由引导使用display:none隐藏非活动选项卡引起的：

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

这导致Highcharts无法获得初始化图表的预期宽度，因此默认为600px。这将发生在使用相同方法隐藏内容的其他工具上

纯CSS解决方案

我们可以使用height:0实现隐藏效果，而不是通过额外的重画或延迟初始化来解决问题；overflow-y:隐藏，这样隐藏的选项卡窗格仍在原位，并且具有有效宽度：

/* 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层叠顺序规则，简而言之，后者获胜

因此，对于在导航选项卡中放置多个图表时遇到相同问题的任何人，这将帮助您解决问题。
对于div id=“2b”，您可以放置以下内容：
style=“border:solid”
并查看div的边框位置，然后对该
id=“chartContainerColumns”
执行此操作。我通常在开发过程中这样做，以了解问题所在。通常，这有助于我将问题缩小到具体项目。我已根据您的关注更新了结果。这是因为活动类还是什么？这表明它与另一个选项卡的大小相同。现在对子控件执行同样的操作，看看哪一个不同，这样您就可以看到特定项的问题所在。它们的大小相同，并且我没有在它们上添加任何css，因此这纯粹是基于代码笔。我猜这是关于表演和活跃的课堂行为这就是答案