Веб-страница содержит пять вкладок содержания; На начальной вкладке есть форма аккаунта / профиля, три других - это записи для аккаунта, а на пятой - Google Charts с данными Google Analyti c.
В гугл-картах нет ничего сложного; линейный график, график ap ie и два географических графика. Используем код Google Chart и стандартные JavaScript и PHP. Единственной сложной задачей было построение / сохранение строк диаграммы в базе данных MySQL, чтобы их можно было извлечь без дополнительных затрат на вызов Google Analyti c.
При первом кодировании страницы вкладки заметил вкладка диаграммы не отображалась, и это оказалось проблемой, когда диаграммы не отображались в DIV, где отображается: нет. Начальная вкладка отображалась: блок, но остальные отображались: нет. Был в состоянии решить эту проблему, переместив вызов DrawChart () в код «активировать вкладку» по сравнению с использованием google.charts.setOnLoadCallback (drawChart) в коде диаграммы.
Кажется, что это нормально работает, ЗАПРЕЩАЕТСЯ, когда браузер отличается от 100%.
Firefox при 100%
Если вы визуализируете страницу на 100% и увеличиваете и уменьшаете масштаб страницы, все в порядке. Однако если вы установите для страницы значение, отличное от 100%, перезагрузите страницу вкладки, а затем выберите вкладку показателей, вы получите различные результаты, ни один из которых не требуется.
Chrome приводит к следующему: Chrome при 80%
Firefox аналогично: Firefox при 80%
Нашли один пост, рассказывающий о поиске мин / max значения каждой оси, которые я могу понять, если границы диаграммы изменяются, как при масштабировании ТОЛЬКО диаграммы, но при масштабировании страницы относительный холст остается того же размера.
Вот начальный код для GA METRI C вкладка и первая линейная диаграмма. Опять же, вызов 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 () должен был go, чтобы избежать отображения: ни одна из упомянутых выше проблем.
<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, которые предоставили некоторые детали но ничто, казалось, не соответствовало этой проблеме. Когда страница увеличивается или уменьшается, а затем перезагружается, вызов drawChart () происходит снова, когда вы выбираете вкладку GA METRICS, поэтому подумал, что он будет отображаться соответствующим образом, но, увы, нет.
Заранее спасибо за любые Возможные решения.
LarryG
ОБНОВЛЕНИЕ 20200211_1220 C
Еще один интересный момент, использующий инструмент веб-разработчика Firefox, DIV с диаграммой имеет высоту 1px , Однако, если вы щелкнете по вкладке GA METRI C (страница не перезагружена, но вызов openPage () будет проходить во вкладке GA METRI C), каждый раз, когда высота увеличивается на 1px. Таким образом, после 40 щелчков мышью вы можете начать видеть форму диаграмм, и они уже там ... Высота DIV просто переопределяется, когда масштаб не равен 100%. См. Ссылку graphi c.
Firefox при 80% после 40 нажатий на GA METRI C вкладка
20200214 ОБНОВЛЕНИЕ - добавлен код с соответствующей страницы, вырезать все, что не было необходимости. Это показывает относительное размещение элемента управления вкладками по сравнению с диаграммами openPage () и metri c. 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 -->