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

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

这个 post 是 ryenus 在 Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

原因

这不是 Highcharts 问题，至少不是 Highcharts 本身的问题，问题是由于 Bootstrap 使用显示：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 */

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

这个解决方案是无缝的，因此您不必再担心图表是否在 tab-pane 内。而且它的效率很高，因为它首先解决了宽度问题，因此之后无需通过 resize/redraw/reflow 使用 javascript.

解决宽度问题

关于级联顺序的注意事项

此补丁需要在bootstrapcss之后加载，因为CSS级联顺序规则，总之以后者规则为准。

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

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

dotnet highchart asp.net with nav tabs bootstrap

html

css

c#

asp.net

dotnethighcharts