Question

对于我正在创建的网站，我想在不同的标签中显示公司信息。一个是公司信息的具体信息，第二个是显示有历史信息的谷歌图表，第三个是显示其他图表。

我正在使用创建不同标签的Bootstrap模板：

<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>

我创建了一个Google图表并将其粘贴到隐藏的标签（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);

提前致谢，罗比

Answer 1

Bootstrap的选项卡JavaScript组件将在显示/隐藏选项卡时触发事件。在您的情况下，您可能需要为shown.bs.tab事件添加事件侦听器。如果第一次运行，事件监听器应该呈现Google图表。

有关详细信息，请查看Bootstraps文档的JavaScript > Tabs > Events部分

渲染隐藏的选项卡（在Tab键切换单击上）

1 个答案: