当包含在基于jQuery的选项卡中时，Google图表的负载非常小

Google Chart loads extremely small when included in jQuery-based tabs

本文关键字：Google 非常 负载 包含 jQuery 选项      更新时间：2023-09-26

我在这个jQuery选项卡插件中使用谷歌的折线图，几乎与演示完全一样——只是数据发生了变化——没有任何修改。可能有50%的时间，图表将以400x200加载，即使已指定以700x250加载。包含的div将具有适当的宽度和高度，但API呈现的图表将以400x200加载到其中。

我怀疑这是因为当API试图渲染时，选项卡不会显示。正因为如此，它试图在它认为为空的东西中进行渲染，从而迫使自己进入最小的默认分辨率。

我的想法是，如果图表的显示可以延迟到单击相应的选项卡，这将解决问题。遗憾的是，我不知道如何做到这一点，我的研究也没有取得丰硕成果。我能找到的最接近的线索是这个线索，但我没有在那里找到任何真正的答案。

如果你有任何建议，我将不胜感激，如有必要，我很乐意提供更多信息。

在隐藏的div中渲染图表（这是选项卡UI的非选择选项卡）会干扰可视化API检测维度的能力，因此您需要做两件事之一：要么在实例化选项卡之前渲染所有图表，要么（正如您所了解的）在首次打开选项卡时绑定事件侦听器来绘制图表。在图表选项中设置高度和宽度不足以解决所有浏览器中的问题。

我浏览了easytabs文档，看起来你应该能够做这样的事情：

// draw chart(s) in your default open tab
// track which tabs you've drawn charts in
var chartsDrawn = {
    tab1: true,
    tab2: false,
    tab3: false
    // etc
};
$('#tab-container').bind('easytabs:after', function (e) {
    if (e.tab == 'tab-2' && !chartsDrawn.tab2) {
        // draw chart(s) in tab 2
        chartsDrawn.tab2 = true;
    }
    else if (e.tab == 'tab-3' && !chartsDrawn.tab3) {
        // draw chart(s) in tab 3
        chartsDrawn.tab3 = true;
    }
    // etc
});

根据需要更改图表选项以设置宽度和高度

var options = {
          title: 'Company Performance'
          ,width:900
          ,height:500
        };

这就是我使用角度引导解决问题的方法https://angular-ui.github.io/bootstrap/

<div class="google-chart" google-chart chart="chartObject1" on-ready="displayGoogleCharts()"></div>
<tab heading="Past Week" select="googleChartSizeFix()">
googleChartSizeFix = function() {
    $('svg').parent().css({ opacity:"0" });
    $(window).resize();
};
displayGoogleCharts = function() {
    $('svg').parent().css({ opacity:"1" });
};

每次选择Tab（触发函数googleChartSizeFix）时，谷歌图表都会设置为透明（不透明度=0，因此它不会通过使用hide（）而消失，但由于其内容是透明的，因此保持其大小），然后触发窗口调整大小，这迫使谷歌图表通过使用宽度100%和高度100%来适应包含它的div：

"options": {
    "chartArea": {
        "width":'100%',
        "height":'100%'
    }
}

最后，一旦谷歌图表准备好（调整大小后），就会触发displayGoogleCharts功能，谷歌图表的不透明度重置为1，因此内容再次可见。

我偶然发现了Bootstrap选项卡的这个"特性"。在HTML中剪切和粘贴多个选项卡时，我不小心将<div class="tab pane active">处于所有选项卡的"active"状态。结果是，所有选项卡的内容都按顺序显示在第一个选项卡中，但随着选项卡的切换而消失。

我对隐藏选项卡的解决方案是将它们定义为活动选项卡，然后在调用chart.draw.后从div中删除"活动"类

<div class="tab-pane active" id="myid" role="tabpanel">
    <script type="text/javascript">
        // all the chart stuff
        chart.draw(data, options);
        $('#myid').removeClass('active');
    </script>
</div>

我看到jQuery选项卡也使用了"active"类。也许这个把戏在那里也行得通。

我解决了这个问题，在保存图表的元素中去掉了引导类，然后在加载图表后，应用引导类。

例如，假设我们想设置一个包含图表的可折叠：

    <a href="#div-id" data-toggle="collapse">
        Expand
    </a>
    <div id="div-id" class="future-collapse">
       <div id="some-chart"></div>
    </div>

然后在你的脚本中：

/**
 *  Callback function E.G. google.charts.setOnLoadCallback(drawChart);
 */
function drawChart(){
   // Drawing the charts
   draw_some_chart();
   // Applying the collapse class to our elements with the future-collapse class
   $('.future-collapse').attr('class', 'collapse');
}
function draw_some_chart(){
    // Draw your charts
}
相关文章：