Google 可视化图例格式 Jquery ui 选项卡

Question

在使用带有 Jquery ui 选项卡的 Google Visualization api 折线图时遇到问题。

我在两个选项卡上有两个图表。默认情况下可见的第一张图显示正常：

隐藏选项卡上的第二个图表似乎弄乱了关键：

我已尝试更改选项，但我所做的似乎没有任何改变。以下是我的选择：

options = { 'title': title,
            titleTextStyle: { color: color, fontSize: 20 },
                'width': 950,
                'height': 400,
                hAxis: {
                    minorGridlines: {
                        count: x
                    }
                },
                chartArea:
                {
                    width: 880
                },
                legend: { position: 'bottom',
                    textStyle: { fontSize: 10 }
                }
            };
            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.LineChart(document.getElementById(divId));
            chart.draw(data, options);
$('#tabs').tabs();

对造成这种情况以及如何预防的任何想法？

编辑

如果我删除 tabs() 调用，它会正确显示。根据@Vipul 下面的回答，尝试将 div 设置为固定宽度，没有区别。

Answer 1

你可以试试

1. 设置标签 div 的固定宽度

2. 先绘制图表，然后创建选项卡。

   setTimeout(function(){/* 编写代码以在此处创建标签 */},300);