当Google Chart包含在基于jQuery的选项卡中时，它会加载极小的内容

I am using Google's line chart almost exactly as the demo - only the data has changed - inside of this jQuery tab plugin with no modification. Maybe 50% of the time, the chart will load at 400x200 even though it has been specified to load at 700x250. The containing div will have the proper width and height, but the chart as rendered by the API will load inside of that at 400x200.

我正在使用谷歌的折线图几乎完全像演示 - 只有数据已经改变 - 在这个jQuery选项卡插件内部没有修改。可能有50％的时间，图表将加载到400x200，即使它被指定加载到700x250。包含div将具有适当的宽度和高度，但API呈现的图表将在400x200内加载。

I suspect this is because the tabs aren't being displayed when the API tries to render. Because of that, it tries to render in something it considers null and therefore forces itself into the smallest default resolution.

我怀疑这是因为API尝试渲染时没有显示选项卡。因此，它尝试渲染它认为为null的东西，因此强制自己进入最小的默认分辨率。

My thought is that if the display of the chart can be delayed until the appropriate tab is clicked, it would resolve the problem. Sadly, I have no idea how to do that, and my research hasn't been fruitful. The closest I could find is this thread, but I didn't find any real answers there.

我的想法是，如果图表的显示可以延迟到单击适当的选项卡，它将解决问题。可悲的是，我不知道该怎么做，而且我的研究也没有成果。我能找到的最接近的是这个帖子，但我没有找到任何真正的答案。

I'd appreciate any advice if you have any, and I'd be glad to follow up with more information if necessary.

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

4 个解决方案

#1

change chart options to set the width and height as you need

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

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

#2

Rendering charts in a hidden div (which is what the non-selected tabs of a tab UI most likely are) messes with the Visualization API's ability to detect dimensions, so you want to do one of two things: either render all charts before instantiating tabs, or (as you've caught on to) bind event listeners to draw the charts when a tab is first opened. Setting the height and width in the chart's options is insufficient to solve the problem in all browsers.

在隐藏div中渲染图表（这是选项卡UI的非选定选项卡最有可能是这些）与Visualization API检测维度的能力混淆，因此您希望执行以下两项操作之一：在实例化选项卡之前渲染所有图表，或者（正如您所说）绑定事件侦听器以在首次打开选项卡时绘制图表。在图表的选项中设置高度和宽度不足以解决所有浏览器中的问题。

I scanned over the easytabs documentation, and it looks like you should be able to do something like this:

我扫描了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
});

#3

This is how I solved using angular-bootstrap https://angular-ui.github.io/bootstrap/

这就是我使用angular-bootstrap解决的问题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" });
};

Each time a Tab is selected (the function googleChartSizeFix is triggered) the Google Chart is set to transparent (opacity = 0, so it does not disappear by the use of hide(), but keeps its size since its content is transparent) followed by the window resize is triggered, this forces Google Chart to fit the div that contains it, by the use of width 100% and height 100%:

每次选择一个标签（触发函数googleChartSizeFix）时，Google图表设置为透明（不透明度= 0，因此它不会因使用hide（）而消失，但保持其大小，因为其内容是透明的）后跟窗口调整大小被触发，这会强制谷歌图表适合包含它的div，使用宽度100％和高度100％：

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

and finally once the Google Chart is ready (after resize) the displayGoogleCharts function is triggered and the opacity of the google chart is reset to 1, so the content is visible once again.

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

#4

I stumbled across this "feature" of Bootstrap tabs. When cut-and-pasting multiple tabs in my HTML, I accidentally left the <div class=" tab-pane active"> in the "active" state for all the tabs. The result was that the content for all the tabs displayed sequentially in the first tab, but went away as you switched tabs.

我偶然发现了Bootstrap标签的这个“功能”。当我在HTML中剪切并粘贴多个标签时，我不小心将所有标签的

置于“活动”状态。结果是所有选项卡的内容在第一个选项卡中按顺序显示，但在切换选项卡时消失。

My solution to the hidden tabs is to define them as active and then remove the "active" class from the div after I call chart.draw.

我对隐藏选项卡的解决方案是将它们定义为活动状态，然后在调用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>

I see that jQuery tabs also use the "active" class. Perhaps this trick will work there too.

我看到jQuery选项卡也使用“active”类。也许这个技巧也适用于那里。

#1