Google chrome Google图表仅在浏览器以100%缩放时渲染

网页包含五个内容选项卡；初始选项卡上有一个帐户/个人资料表单，其他三个是帐户记录，第五个包含谷歌图表，其中包含谷歌分析数据

谷歌的图表并不复杂；一个折线图、一个饼图和两个地理图。使用谷歌图表代码和标准JavaScript和PHP。唯一复杂的事情是在MySQL数据库中构建/持久化图表字符串，这样就可以在没有Google分析调用开销的情况下检索它们

当第一次对选项卡页面进行编码时，注意到图表选项卡没有呈现，这就是图表无法在显示为“无”的DIV中呈现的问题。最初的选项卡是display:block，但其他选项卡是display:none。通过将DrawChart（）调用移动到“activate tab”代码中，而不是在图表代码中使用google.charts.setOnLoadCallback（DrawChart），可以解决这个问题

这似乎可以正常工作，除非浏览器不是100%

如果以100%渲染页面并放大和缩小页面，则一切正常。但是，如果将页面设置为非100%，请重新加载选项卡页面，然后选择“度量”选项卡，则会得到各种结果，而这些结果都不是所需的

Chrome可产生以下功能：

Firefox与此类似：

我发现有一篇文章讨论了如何查找每个轴的最小/最大值，我可以理解图表边界是否在变化，比如只缩放图表，但随着页面缩放，相对画布的大小仍然相同

以下是GA公制选项卡和第一个折线图的起始代码。同样，drawChart（）调用位于选项卡控制代码中，因此普通回调被注释掉。这是由于前面提到的时间问题

<div id="GA_Metrics" class="tabcontent">
<div id="header"><span style="font-size:10px;font-weight: bold;">Record No: 007101</span></div>
<div id="postings_gametric_container_linechart" class="container"></div>
<div id="postings_gametric_container_piechart" class="container"></div>
<div id="postings_gametric_container_geoworld" class="container"></div>
<div id="postings_gametric_container_geousa" class="container"></div>

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages': ['corechart','geochart','table'],'mapsApiKey': 'keygoeshere'});
//google.charts.setOnLoadCallback(drawChart);

function drawLineChart() 
{

    var data = google.visualization.arrayToDataTable([[{type: 'date', label: 'Date'},

    {type: 'number', label: 'SIA49775'},
    {type: 'number', label: 'SIA51972'},
    {type: 'number', label: 'SIA52931'},
    {type: 'number', label: 'SIA53349'},
    {type: 'number', label: 'SIA53350'}],
    [new Date(2019,11,18),0,1,2,1,7],
    [new Date(2019,11,19),0,0,0,1,0],
    [new Date(2019,11,20),2,2,2,1,2],
    [new Date(2019,11,21),2,4,3,6,1],
    [new Date(2019,11,22),0,3,3,1,2],
    [new Date(2019,11,23),2,2,5,1,7],
    [new Date(2019,11,24),0,1,1,2,1],
    [new Date(2019,11,25),2,2,4,0,4],
    [new Date(2019,11,26),1,0,1,4,1],
    [new Date(2019,11,27),1,0,2,0,1],
    [new Date(2019,11,28),3,2,4,0,8],
    [new Date(2019,11,29),2,1,2,3,1],
    [new Date(2019,11,30),1,3,3,5,5],
    [new Date(2019,11,31),2,1,0,2,0],
    [new Date(2020,00,01),6,4,7,3,8],
    [new Date(2020,00,02),2,3,4,0,6],
    [new Date(2020,00,03),2,1,5,7,4],
    [new Date(2020,00,04),0,0,0,1,0],
    [new Date(2020,00,05),2,1,2,0,1],
    [new Date(2020,00,06),1,2,3,2,7],
    [new Date(2020,00,07),0,1,0,3,2],
    [new Date(2020,00,08),1,1,4,0,4],
    [new Date(2020,00,09),1,1,2,1,4],
    [new Date(2020,00,10),3,2,4,2,9],
    [new Date(2020,00,11),2,5,2,2,6],
    [new Date(2020,00,12),0,0,1,1,1],
    [new Date(2020,00,13),2,2,3,0,6],
    [new Date(2020,00,14),4,4,2,3,8],
    [new Date(2020,00,15),3,3,3,2,3],
    [new Date(2020,00,16),0,3,2,1,1]]);

    var options = {
        title: 'Active Posting(s) PageViews (Last 30 Days)',
        hAxis: {
                  format: 'M/d',
                  gridlines: {color: '#000080'}
               },
        vAxis: {
                  title: 'Page Views',
                  gridlines: {color: '#000080'}
               },
        pointSize: 3,
        backgroundColor: '#cfcfcf',
        chartArea:{width:'62%'}
};

/* Create instance of "Classic" Visualization Line Chart  */
var chart = new google.visualization.LineChart(document.getElementById('postings_gametric_container_linechart'));
chart.draw(data, options);

记录编号：007101
load（'current'，{'packages'：['corechart'，'geochart'，'table']，'mapsApiKey'：'keygoesher'}）；
//google.charts.setOnLoadCallback（drawChart）；
函数drawLineChart（）
{
var data=google.visualization.arrayToDataTable（[[{type:'date'，label:'date'}，
{类型：'number'，标签：'SIA49775'}，
{类型：'number'，标签：'SIA51972'}，
{类型：'number'，标签：'SIA52931'}，
{类型：'number'，标签：'SIA53349'}，
{类型：'number'，标签：'SIA53350'}]，
[新日期（2019,11,18），0,1,2,1,7]，
[新日期（2019,11,19），0,0,0,1,0]，
[新日期（2019,11,20），2,2,2,1,2]，
[新日期（2019,11,21），2,4,3,6,1]，
[新日期（2019,11,22），0,3,3,1,2]，
[新日期（2019,11,23），2,2,5,1,7]，
[新日期（2019,11,24），0,1,1,2,1]，
[新日期（2019,11,25），2,2,4,0,4]，
[新日期（2019,11,26），1,0,1,4,1]，
[新日期（2019,11,27），1,0,2,0,1]，
[新日期（2019,11,28），3,2,4,0,8]，
[新日期（2019,11,29），2,1,2,3,1]，
[新日期（2019,11,30），1,3,3,5,5]，
[新日期（2019,11,31），2,1,0,2,0]，
[新日期（2020,00,01），6,4,7,3,8]，
[新日期（2020,00,02），2,3,4,0,6]，
[新日期（2020,00,03），2,1,5,7,4]，
[新日期（2020,00,04），0,0,0,1,0]，
[新日期（2020,00,05），2,1,2,0,1]，
[新日期（2020,00,06），1,2,3,2,7]，
[新日期（2020,00,07），0,1,0,3,2]，
[新日期（2020,00,08），1,1,4,0,4]，
[新日期（2020,00,09），1,1,2,1,4]，
[新日期（2020,00,10），3,2,4,2,9]，
[新日期（2020,00,11），2,5,2,2,6]，
[新日期（2020,00,12），0,0,1,1,1]，
[新日期（2020,00,13），2,2,3,0,6]，
[新日期（2020,00,14），4,4,2,3,8]，
[新日期（2020,00,15），3,3,3,2,3]，
[新日期（2020,00,16），0,3,2,1,1]]；
变量选项={
标题：“活动发布页面浏览量（过去30天）”，
哈克斯：{
格式：“M/d”，
网格线：{color:'#000080'}
},
言辞：{
标题：“页面浏览量”，
网格线：{color:'#000080'}
},
点数：3，
背景颜色：“#cfcfcf”，
图表区：{宽度：'62%'}
};
/*创建“经典”可视化折线图实例*/
var chart=new google.visualization.LineChart（document.getElementById（'postings\u gametric\u container\u LineChart'）；
图表绘制（数据、选项）；

下面是控制选项卡的页面下方的代码。这是drawChart（）调用避免显示的地方：上面提到的无问题

<script>
function openPage(pageName,elmnt,color) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(pageName).style.display = "block";
  elmnt.style.backgroundColor = color;
  //Moved the drawChart() call to this location so the call to render the chart comes AFTER the
  //DIV is visible, otherwise, the chart does not render properly.  See DECLARATION for explanation.
  if(pageName == "GA_Metrics")
  {
      drawLineChart();
      drawPieChart();
      drawGeoWorldMap();
      drawGeoUSAMap();
  }
}

函数openPage（页面名、elmnt、颜色）{
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

谷歌搜索了Chrome和Firefox的红色错误消息，其中提供了一些详细信息，但似乎没有任何内容适合此问题。当页面放大或缩小然后重新加载时，当您选择GA METRICS选项卡时，drawChart（）调用会再次发生，因此认为它会正确呈现，但遗憾的是不会

提前感谢您提供任何可能的解决方案

拉里格

更新20200211_1220C

另一个有趣的小贴士是，使用Firefox Web Developer工具，带有图表的DIV的高度为1px。但是，如果您单击GA METRIC选项卡（页面未重新加载，但openPage（）调用会在GA METRIC选项卡中传递），每次高度增加1px。因此，单击40次后，您可以开始查看图表表单，因此它们就在那里……当缩放不是100%时，DIV高度将被覆盖。请参见图形链接

20200214更新-新增公司