jquery - 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(s)

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

   setTimeout(function(){ /* 编写代码来创建标签 */},300);