带选项卡的Google图表 - 图表区域不正确 [英] Google Charts With Tabs - Chart Area Incorrect

问题描述

虽然这可能是一个常见的问题，但我无法找到解决这个问题的解决方案。

我试图用GOOGLE创建2个饼图CHARTING API ..

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

以下是 a> ...

在小提琴中，我们可以看到隐藏标签中的图表区域小于活动标签中的图表区域，尽管两个图表是相同的......

  google.load（'visualization'，'1.0'，{'packages'：['corechart ]}）; 
 google.setOnLoadCallback（drawChart）; 
 
函数drawChart（）
 
 {
 
 var data = google.visualization.arrayToDataTable（[
 ['Task'，'Hours每日']，
 ['工作'，11]，
 ['吃'，2]，
 ['通勤'，2]，
 ['看电视' ，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）; 
} 
  

更新小提琴如果您可以这里 ..

解决方案

我有半个答案给你。我可以看到发生了什么，我可以看到一个解决方法，但我不知道为什么会发生这种情况......

当您调用.draw时，vis api尝试根据容器的尺寸计算'best-fit'。

你的问题是你的容器div以不同的尺寸开始

p>

更改

 ＃content_2，＃content_3 {display：none; } 
  

到

 ＃content_2，＃content_3 {display：block; } 
  

查看...

解决此问题的解决方法是，在绘制图表之前触发单击事件，从而在选项卡框中初始化div。

 <$ c点击（）。$ c $（。tabs a [title ='content_2']）。click（）
 $（。tabs a [title ='content_1']）。click（）
  

它在小提琴上看起来很丑，但您可以通过播放显示选项来清理它。

以下是小提琴的演示

希望有帮助

Although this may seem a common problem but i was not able to find a solution to this particular problem..

I am trying to create 2 pie charts using GOOGLE CHARTING API..

The 1st Pie chart which is in the 1st TAB (default selected) shows the accurate width and height but the 2nd pie chart in the hidden tab does not show appropriate width..

Here is the fiddle...

In the Fiddle we can see the chart area in the hidden tab is less than the chart area in the active tab although the code for both the charts is the same...

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);
}

Update the fiddle if you can here..

解决方案

I have half an answer for you. I can see what's happening, I can see a workaround, but I'm not sure yet why it's happening...

When you call .draw the vis api tries to calculate a 'best-fit' based on the dimensions of the container that it is being drawn in.

Your problem is that your container divs start off at different sizes

Change

#content_2, #content_3 { display:none; }

to

#content_2, #content_3 { display:block; }

to see...

A workaround that fixes the problem is to 'init' the div inside the tab box by firing off the click event before drawing the chart with a

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

It looks ugly on the fiddle, but you can tidy that by playing with the display options

Here's the fiddle as a demo

Hope that helps

这篇关于带选项卡的Google图表 - 图表区域不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！