呈現隱藏的標籤（在標籤切換點擊）

對於我創建的網站，我想在不同的標籤頁中顯示公司信息。其中一個是關於公司信息的，第二個會顯示帶有歷史信息的Google圖表，第三個會顯示其他圖表。呈現隱藏的標籤（在標籤切換點擊）

我使用的創建不同的標籤引導程序模板：

<ul class="nav nav-tabs"> 
<li class="active"><a href="#info" data-toggle="tab"><h5>Company information</h5></a></li> 
<li><a href="#network" data-toggle="tab"><h5>network</h5></a></li> 
<li><a href="#sales" data-toggle="tab"><h5>Sales</h5></a></li> 
</ul>

現在我有不同的標籤：

<div class="tab-content"> 
<div class="tab-pane active" id="info"> 
<p>[[company description]]</p> 
</div> 
<div class="tab-pane" id="network"> 
<p>[[company network]]</p> 
</div> 
</div>

我在一個隱藏的標籤創建谷歌圖表粘貼此（DIV ），但這不會顯示在正確的大小。我期望這與在渲染時div的尺寸仍然不清楚的事實有關？

我怎麼才能渲染它，只有當標籤被點擊？我使用下面的腳本：

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 

google.load("visualization", "1", {packages: ["corechart"], callback: init}); 

    google.setOnLoadCallback(drawChart); 
    function drawChart() { 
    var data = new google.visualization.DataTable(); 


    data.addColumn('number', 'x'); 
    data.addColumn('number', 'values'); 
    data.addColumn({id:'i0', type:'number', role:'interval'}); 
    data.addColumn({id:'i1', type:'number', role:'interval'}); 
    data.addColumn({id:'i2', type:'number', role:'interval'}); 
    data.addColumn({id:'i2', type:'number', role:'interval'}); 
    data.addColumn({id:'i2', type:'number', role:'interval'}); 
    data.addColumn({id:'i2', type:'number', role:'interval'}); 

    data.addRows([ 
     [1, 100, 90, 110, 85, 96, 104, 120], 
     [2, 120, 95, 130, 90, 113, 124, 140], 
     [3, 130, 105, 140, 100, 117, 133, 139], 
     [4, 90, 85, 95, 85, 88, 92, 95], 
     [5, 70, 74, 63, 67, 69, 70, 72], 
     [6, 30, 39, 22, 21, 28, 34, 40], 
     [7, 80, 77, 83, 70, 77, 85, 90], 
     [8, 100, 90, 110, 85, 95, 102, 110]]); 

    // The intervals data as narrow lines (useful for showing raw source data) 
    var options_lines = { 
     title: 'Line intervals, default', 
     curveType: 'function', 
     lineWidth: 4, 
     intervals: { 'style':'line' }, 
     legend: 'none' 
    }; 

    var chart_lines = new google.visualization.LineChart(document.getElementById('chart_lines')); 
    chart_lines.draw(data, options_lines);

由於提前，顯示/隱藏標籤時羅比

來源

2014-12-28 Robbie

引導的標籤JavaScript組件將觸發事件。在你的情況下，你可能需要爲shown.bs.tab事件添加一個事件監聽器。如果事件監聽器第一次運行，它應該呈現Google圖表。

請參閱Bootstraps文檔的JavaScript > Tabs > Events部分以獲取更多信息

來源

2014-12-28 11:11:49 ckuijjer

呈現隱藏的標籤（在標籤切換點擊）

回答

相關問題