google-chrome - 谷歌图表仅在浏览器缩放为 100% 时呈现

Question

网页包含五个内容标签；初始选项卡上有一个帐户/个人资料表单，另外三个是该帐户的记录，第五个包含带有 Google 分析数据的 Google 图表。

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

当第一次对标签页进行编码时，注意到图表标签没有呈现，结果是图表不会在显示：无的 DIV 中呈现的问题。最初的选项卡是 display:block，但其他选项卡是 display:none。能够通过将 DrawChart() 调用移动到“激活选项卡”代码中而不是在图表代码中使用 google.charts.setOnLoadCallback(drawChart) 来解决这个问题。

除了浏览器不是 100% 时，这似乎工作正常。

火狐 100%

如果您以 100% 渲染页面并放大和缩小页面，一切都很好。但是，如果您将页面设置为 100% 以外的值，重新加载选项卡页面，然后选择指标选项卡，您会得到各种结果，这些结果都不是我们想要的。

Chrome 产生以下内容： Chrome at 80%

Firefox 类似： Firefox 为 80%

发现一篇关于查找每个轴的最小/最大值的帖子，如果图表边界发生变化，例如仅缩放图表，我可以理解，但是通过页面缩放，相对画布仍然是相同的大小。

这是 GA METRIC 选项卡和第一个折线图的起始代码。同样，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);

这是控制选项卡的页面下方的代码。这是 drawChart() 调用必须去避免上面提到的 display:none 问题的地方。

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

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

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

拉里G

更新 20200211_1220C

另一个有趣的花絮，使用 Firefox Web Developer Tool，带有图表的 DIV 的高度为 1px。但是，如果您单击 GA METRIC 选项卡（页面未重新加载，但在 GA METRIC 选项卡中发生 openPage() 调用），则每次高度增长 1px。因此，在单击 40 次后，您可以开始看到图表形式，所以它们就在那里……当缩放不是 100% 时，DIV 高度刚刚被覆盖。见图形链接。

在 GA METRIC 选项卡点击 40 次后，Firefox 的使用率为 80%

20200214 更新 - 从受影响的页面添加了代码，删除了所有不必要的内容。这显示了选项卡控件与 openPage() 和指标图表的相对位置。openPage() 位于选项卡控件下方。它下面唯一的东西是页脚等。

<!-- DIV STARTS HERE -->
<button class="tablink" onclick="openPage('Account_Info', this, '#000080')" id="defaultOpen">Account Info</button>
<button class="tablink" onclick="openPage('Posts_Active', this, '#000080')">ACTIVE</button>
<button class="tablink" style="opacity:1.0;" onclick="openPage('Posts_SOLD', this, '#000080')">SOLD</button>
<button class="tablink" style="opacity:1.0;" onclick="openPage('Posts_NotSOLD', this, '#000080')">NOT SOLD</button>
<button class="tablink" style="opacity:1.0;" onclick="openPage('GA_Metrics', this, '#000080')">GA Metrics</button>

<div id="Account_Info" class="tabcontent">
</div>

<div id="Posts_Active" class="tabcontent">
</div>

<div id="Posts_SOLD" class="tabcontent">
</div>

<div id="Posts_NotSOLD" class="tabcontent">
</div>

<div id="GA_Metrics" class="tabcontent">
<div id="header"><span style="font-size:10px;font-weight: bold;">Record No: 019036</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">
    // Note: you will need to get a mapsApiKey for your project.  "mapsApiKey" is the property name and is required no matter what you call your Key.
    // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
    google.charts.load('current', {'packages': ['corechart','geochart','table'],'mapsApiKey': 'API_KEY_GOES_HERE'});

    //20190304LG: Noticed the chart was not rendering properly. Found StackOverFlow article where if the charts are in a "display:none" div like a tab
    //they will not render properly.  They will revert to google chart css which is usually 400x200px.  The solution was to either make the
    //chart call before the tabs/divs were set to display:none OR load them when the tab/div was activated.  As a result, LG commented out
    //the next line and put the drawChart() call in the ACCOUNT_MGMNT_TEMP.HTML file in the openPage() Javascript function.  This seems to 
    //have fixed the problem.
    //google.charts.setOnLoadCallback(drawChart);
    //
    //20200209LG: The Geo Strings sometimes contain an apostrophe such as ['Provence-Alpes-Cote d'Azur',1] which will prevent rendering.
    //            Added some str_replace code to escape those instances, but its bruteforce for now.

    function drawLineChart() 
    {
        var data = google.visualization.arrayToDataTable([[{type: 'date', label: 'Date'},
{type: 'number', label: 'SIA35512'},
{type: 'number', label: 'SIA39964'},
{type: 'number', label: 'SIA53391'}],
[new Date(2020,00,14),0,0,1],
[new Date(2020,00,15),0,0,0],
[new Date(2020,00,16),1,2,0],
[new Date(2020,00,17),0,0,0],
[new Date(2020,00,18),1,0,0],
[new Date(2020,00,19),0,1,0],
[new Date(2020,00,20),3,4,0],
[new Date(2020,00,21),2,3,1],
[new Date(2020,00,22),1,0,0],
[new Date(2020,00,23),1,0,0],
[new Date(2020,00,24),2,0,0],
[new Date(2020,00,25),0,0,0],
[new Date(2020,00,26),0,4,0],
[new Date(2020,00,27),6,0,0],
[new Date(2020,00,28),2,1,0],
[new Date(2020,00,29),1,0,0],
[new Date(2020,00,30),0,0,0],
[new Date(2020,00,31),1,1,0],
[new Date(2020,01,01),0,1,1],
[new Date(2020,01,02),0,1,0],
[new Date(2020,01,03),1,2,2],
[new Date(2020,01,04),3,2,1],
[new Date(2020,01,05),1,0,0],
[new Date(2020,01,06),0,1,0],
[new Date(2020,01,07),0,0,0],
[new Date(2020,01,08),1,1,0],
[new Date(2020,01,09),0,1,0],
[new Date(2020,01,10),1,0,0],
[new Date(2020,01,11),0,2,0],
[new Date(2020,01,12),2,0,0]]);

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

    function drawPieChart() 
    {
        var data = google.visualization.arrayToDataTable([['Posting','Page Views'],
['35512',1395],
['39964',645],
['53391',80]]);

        var options = {
            title: 'Active Posting(s) % PageViews (Last 30 Days)',
            backgroundColor: '#cfcfcf',
            is3D: true
        };

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

    //20190321 LG - REPLACE the chart.draw with the geomap.draw.  SEE this URL or your TEST_geo2.html file

    function drawGeoWorldMap() 
    {
        var data = google.visualization.arrayToDataTable([['Country','PageViews'],
['Australia',8],
['Belgium',11],
['Brazil',3],
['Canada',64],
['Czechia',8],
['Ecuador',3],
['Georgia',3],
['Germany',3],
['Italy',3],
['Malaysia',3],
['Mexico',3],
['New Zealand',3],
['Puerto Rico',3],
['Singapore',3],
['South Korea',3],
['United Kingdom',3],
['United States',1227]]);

        var options = {
        region: 'world',
        displayMode: 'regions',
        backgroundColor: '#cfcfcf',
        colorAxis: {colors: ['green', 'blue']}
        };

        var chart = new google.visualization.GeoChart(document.getElementById('postings_gametric_container_geoworld'));
        chart.draw(data, options);

    }

    function drawGeoUSAMap() 
    {
        var data = google.visualization.arrayToDataTable([['State','PageViews'],
['(not set)',3],
['Aguadilla',3],
['Alabama',11],
['Alberta',3],
['Arizona',5],
['Arkansas',3],
['British Columbia',24],
['California',80],
['Canterbury',3],
['Colorado',16],
['Connecticut',37],
['District of Columbia',13],
['England',3],
['Flanders',11],
['Florida',61],
['Georgia',27],
['Guayas',3],
['Gyeonggi-do',3],
['Idaho',34],
['Illinois',16],
['Indiana',50],
['Iowa',5],
['Kansas',13],
['Kentucky',8],
['Liberec Region',5],
['Maine',16],
['Massachusetts',29],
['Michigan',85],
['Minnesota',50],
['Mississippi',8],
['Missouri',77],
['Montana',8],
['Nebraska',16],
['Nevada',3],
['New Hampshire',29],
['New Jersey',11],
['New South Wales',3],
['New York',101],
['North Carolina',32],
['North Dakota',11],
['Nova Scotia',5],
['Ohio',66],
['Oklahoma',5],
['Ontario',27],
['Oregon',13],
['Pennsylvania',56],
['Prague',3],
['Puebla',3],
['Quebec',5],
['Queensland',3],
['Rhineland-Palatinate',3],
['Rhode Island',5],
['Samegrelo-Zemo Svaneti',3],
['Selangor',3],
['Sicily',3],
['South Carolina',5],
['State of Sao Paulo',3],
['Tennessee',27],
['Texas',61],
['Utah',8],
['Vermont',3],
['Victoria',3],
['Virginia',21],
['Washington',27],
['West Virginia',3],
['Wisconsin',74]]);

        var options = {
        region: 'US',
        backgroundColor: '#cfcfcf',
        resolution: 'provinces',
        displayMode: 'regions',
        colorAxis: {colors: ['green', 'blue']}
        };

        var chart = new google.visualization.GeoChart(document.getElementById('postings_gametric_container_geousa'));
        chart.draw(data, options);

    }

/*    
    function drawGeoUSACityMap() 
    {
        var data = google.visualization.arrayToDataTable([<!--GA_METRIC_GEOUSACITY_CALL-->]);

        var options = {
        region: 'US',
        backgroundColor: '#cfcfcf',
        displayMode: 'markers',
        resolution: 'metros',
        colorAxis: {colors: ['green', 'blue']}
        };

        var chart = new google.visualization.GeoChart(document.getElementById('postings_gametric_container_geousacity'));
        chart.draw(data, options);
    }
*/

</script>
</div>

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

//INITIALIZATION of the TABS ... get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>

<!-- DIV ENDS HERE -->

标签： google-chromefirefoxchartsgoogle-visualization