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與導航標籤引導

回答

相關問題