带有标签的Google图表 – 图表区域不正确

虽然这似乎是一个常见的问题，但我无法找到解决这一特定问题的方法。

我正在尝试使用GOOGLE CHARTING API创建2个饼图。

第一个TAB（默认选中）中的第一个饼图显示了准确的宽度和高度，但隐藏选项卡中的第二个饼图没有显示适当的宽度。

这是小提琴 ……

在小提琴中，我们可以看到隐藏选项卡中的图表区域小于活动选项卡中的图表区域，尽管两个图表的代码相同…

google.load('visualization', '1.0', {'packages':['corechart']}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]); var options = { title: 'My Daily Activities', backgroundColor: '#ddd', chartArea: {width:500,height:200} }; var chart = new google.visualization.PieChart(document.getElementById('chart')); chart.draw(data, options); var chart1= new google.visualization.PieChart(document.getElementById('chart1')); chart1.draw(data, options); } 

如果你能在这里更新小提琴 ..

Answer 1

我有半个答案给你。 我可以看到正在发生的事情，我可以看到一个解决方法，但我不确定为什么会发生这种情况……

当您调用.draw时，vis api会尝试根据绘制的容器的尺寸来计算“最佳拟合”。

您的问题是您的容器div以不同的大小开始

更改

 #content_2, #content_3 { display:none; } 

至

 #content_2, #content_3 { display:block; } 

查看…

解决问题的一种解决方法是通过在绘制图表之前触发click事件来“初始化”选项卡框内的div。

 $(".tabs a[title='content_2']").click() $(".tabs a[title='content_1']").click() 

它在小提琴上看起来很难看，但你可以通过玩显示选项来整理它

这是演示文稿的小提琴

希望有所帮助

Answer 2

您可以在调用“绘制”之前简单地使DIV可见，然后在再次隐藏之后立即显示。 例如

 //make div visible chart.draw(); //make div hidden 

Answer 3

以下是带有标签的Google图表的完整工作示例

     
 
 
 
 
Tab1
 
Tab2
 
Tab3
 
 
 
 
 
 
 
 
 
 
Home
 
About
 
 
  

Answer 4

如果有人还在看这个。 我建议在激活标签之前重新绘制图表

  $("#tabs").tabs({ beforeActivate: function (event, ui) { drawChart(); } });