javascript - 当包含在基于 jQuery 的选项卡中时，Google Chart 加载量非常小

Question

我正在使用 Google 的 line chart几乎与演示完全一样 - 只有数据发生了变化 - 在 this jQuery tab plugin 内部没有修改。也许有 50% 的时间，图表将以 400x200 加载，即使它已被指定为以 700x250 加载。包含的 div 将具有适当的宽度和高度，但 API 呈现的图表将以 400x200 加载到其中。

我怀疑这是因为当 API 尝试呈现时未显示选项卡。正因为如此，它会尝试以它认为是 null 的内容进行渲染，从而迫使自己采用最小的默认分辨率。

我的想法是，如果图表的显示可以延迟到单击适当的选项卡时，就可以解决问题。可悲的是，我不知道该怎么做，我的研究也没有成果。我能找到的最接近的是 this thread ，但我没有在那里找到任何真正的答案。

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

Answer 1

在隐藏的 div 中呈现图表(这是选项卡 UI 中未选择的选项卡最有可能的)会扰乱 Visualization API 检测维度的能力，因此您需要执行以下两种操作之一:要么呈现所有图表在实例化选项卡之前，或者(正如您所了解的那样)绑定(bind)事件监听器以在首次打开选项卡时绘制图表。在图表的选项中设置高度和宽度不足以解决所有浏览器中的问题。

我浏览了 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
});