我有一個選項卡式切換統計信息頁面,其中有10個包含圖表的單獨選項卡。通過點擊每個標籤,正在顯示預裝的相應圖表。但是,它不會擴展到其容器中。更奇怪的是,當我調整窗口大小時,可視圖表顯示正確(我想它會進行一些重新計算)。我應該如何修改我的代碼,以便在點擊後進行重新計算,或對問題提出任何建議?隱藏的元素在顯示後未正確加載
這裏是我的jsfiddle: http://jsfiddle.net/g66ut7c6/
<!--BEGIN TABS-->
<div class="tabbable tabbable-custom">
<ul class="nav nav-tabs">
<li>
<a href="#tab_1_1" data-toggle="tab">
1
</a>
</li>
<li>
<a href="#tab_1_2" data-toggle="tab">
2
</a>
</li>
<li>
<a href="#tab_1_3" data-toggle="tab">
3
</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tab_1_1">
<div class="scroller">
<div class="col-md-6 col-md-offset-3">
<div class="portlet light">
<p> Piechart by ülkeler </p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_1_2">
<div class="scroller">
<div class="col-md-6 col-md-offset-3">
<div class="portlet light">
<p> Piechart by step dağılımı </p>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_1_3">
<div class="scroller">
<div class="col-md-6 col-md-offset-3">
<div class="portlet light">
<p> Piechart by hasta sayısı ay </p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--END TABS-->
我可以不包括在我的jsfiddle圖表,因爲它們含有一些紅寶石代碼。 PS:使用Chartkick和Google Charts繪製圖表,MetronicJS繪製標籤。
編輯:默認情況下可見的第一個圖表初始顯示正確,但其他圖表不是。當另一個圖表可見時調整窗口大小後,前一個會再次被打破。
不幸的是,這是沒用的。我甚至無法使用chrome調整窗口的大小,我想這不是Chrome,Firefox等瀏覽器支持的,因此無法以編程方式觸發調整大小。 –
感謝您對@Burak發表的評論,我現在正在閱讀MDN的內容,確實存在[限制](https://developer.mozilla.org/en-US/docs/Web/API/Window/ resizeTo)。其實我並沒有讓它在OP的小提琴上工作。儘管我可以用'window.dispatchEvent(new Event('resize'))'分派事件,但我不確定它何時也會調整圖表的大小。 – David
我不知道爲什麼它不調整圖表大小,它看起來對它們沒有任何影響。感謝回覆btw^_^ –