Question

我想问一些事情，例如，当我想使用此参考https://codepen.io/wizly/pen/BlKxo/显示时，这是我的代码使用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>

，此编码的结果将显示在网络浏览器中

但是，第二个导航选项卡结果变为此。如您所见，图表的大小减少到原始图表的50％。

问题是如何使第二个标签中的结果与第一个标签明显相似？对此问题的任何建议？非常感谢你

更新：在我放置边框后，这就是结果

Answer 1

这篇文章是来自ryenus的直接回答 Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

原因

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

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

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

纯CSS解决方案

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

/* 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通过resize / redraw / reflow解决宽度问题。

关于级联顺序的注意事项

这个补丁需要在bootstrap css之后加载，因为CSS级联顺序规则，简而言之，后者规则获胜。

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

带有导航标签bootstrap的dotnet highchart asp.net

1 个答案: