为什么不刷新Google图表直到我刷新 [英] Why aren't google charts loading until I refresh
问题描述
我一直使用谷歌图表一段时间没有任何问题。我的代码根本没有改变，但最近我的图表还没有加载，直到我刷新浏览器几次，然后等待，然后再次刷新。当图表加载时，他们很好。我可以去其他页面并返回，并立即加载。我会说现在我加载我的jQuery后，我的HTML而不是之前，doubley确保页面加载jQuery之前。
我使用Mozilla Firefox。如果我没有关闭浏览器一切正常，但只要关闭浏览器并返回页面，图表就不会马上显示出来。这让我想，一旦它在缓存中一切都很好，但我认为从google图表获取loader.js存在问题。
我包含google图表使用以下内容：
< script type =text / javascriptsrc =https://www.gstatic.com /charts/loader.js\"></script>
然后包括我的jquery
< script type =text / javascriptsrc =js / charts.js>< / script>
最初我并没有将我的代码放在文档中，但我最近添加了这个代码，以确保页面已经加载之前运行我的代码。
然后这里是我的charts.js jQuery代码加载图表（我明显包括jquery，但没有显示在这里）
$（document）.ready（function（）{
$ .post php，{CODE：loadCharts}，function（data）{
google.charts.load（'current'，{
callback：function（）{
myData1 = data.chart.splice（0，data.salesCount）;
myData2 = data.chart.splice（0，data.expensesCount）;
myData3 = data.chart.splice（0 ，data.hrcostCount）;
drawBarChart（'total_sales_chart'，myData1，Total Sales Last Sixs，Sales）;
drawBarChart（'total_expenses_chart'，myData2，'Total Expenses过去六个月，费用）;
drawBarChart（'total_hr_chart ，myData3，总人力资源成本最后六个月，人力资源成本）;
函数drawBarChart（id，myData，title，axis）{
var data = new google.visualization.DataTable（）;
data.addColumn（'date'，'Month'）;
data.addColumn（'number'，axis）;
var dataLength = myData.length;
var rows = new Array（）;
for（var i = 0; i< dataLength; i ++）{
rows.push（[new Date（myData [i] [0]），0]）;
}
data.addRows（rows）;
var options = {
title：title，
hAxis：{
title：axis
}，
vAxis：{
title：'月'
}，
backgroundColor：{fill：'transparent'}，
legend：{position：'none'}，
'animation'：{duration ：1000，easing：'out'}
};
var chart = new google.visualization.BarChart（document.getElementById（id））;
chart.draw（data，options）;
$ b setTimeout（function（）{
for（i = 0; i< dataLength; i ++）{
data.setValue（i，1，myData [i] [1] ）;
}
chart.draw（data，options）;
}，1000）;
}
}，
packages：['corechart']
}）;
}，JSON）;
}）;
这篇文章是我从后端获取数据的地方。我知道我的帖子是可以的，因为它会立即回来，但我确实知道每次回调后的代码都没有运行。这意味着由于某种原因，我不认为loader.js正在正确下载。
一旦图表显示一切正常。任何人都可以告诉我为什么页面首次加载时无法加载图表？
如果您对拼接有疑问，我可以告诉你。我将所有数据都带回到一个数组中，然后将它们分成3个数组，因此我只需为3个图表创建一个帖子。然而，我的数组没有什么问题，只是谷歌图表回调。 解决方案
答案是这样的。即使我禁用了我的插件弹出式窗口拦截器，以查看这是否导致问题，但有些事我不知道。 Mozilla Firefox有一个内置的弹出窗口拦截器。在工具/选项/内容下。您需要取消阻止弹出窗口，然后谷歌图表将加载罚款到Mozilla。这一直在困扰我好几个星期，我甚至不知道它有一个内置弹出窗口拦截器。
I have been using google charts for a while without any problems. My code hasn't changed at all, but just lately my charts have not been loading, until I refresh the browser a few times, and wait, and then refresh again. When the charts do load they are fine. I can go to other pages and come back, and they load instantly. I will say now I load my jquery after my html rather than before, that doubley makes sure the page is loaded before the jquery.
I am using mozilla firefox. If I don't close down the browser everything is fine, but as soon as I close the browser and go back to the page the charts will not show straight away. Which makes me think that once it is in the cache everything is fine, but I think there is a problem getting the loader.js from google charts.
I include the google chart using the following
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
Then I include my jquery
<script type="text/javascript" src="js/charts.js"></script>
Originally I didn't put my code in document ready, but I added that recently to make sure the page had loaded before running my code.
Then here is my charts.js jQuery code to load the chart (I obviously include jquery, but not shown that here)
$(document).ready(function(){
$.post("database/home/ajax/ajax.php", {CODE:"loadCharts"}, function(data){
google.charts.load('current', {
callback: function () {
myData1=data.chart.splice(0,data.salesCount);
myData2=data.chart.splice(0,data.expensesCount);
myData3=data.chart.splice(0,data.hrcostCount);
drawBarChart('total_sales_chart',myData1,"Total Sales Last Six Months","Sales");
drawBarChart('total_expenses_chart',myData2,"Total Expenses Last Six Months","Expenses");
drawBarChart('total_hr_chart',myData3,"Total HR Costs Last Six Months","HR Costs");
function drawBarChart(id,myData,title,axis) {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Month');
data.addColumn('number', axis);
var dataLength= myData.length;
var rows = new Array();
for(var i = 0; i < dataLength ; i++) {
rows.push([new Date(myData[i][0]),0]);
}
data.addRows(rows);
var options = {
title: title,
hAxis: {
title: axis
},
vAxis: {
title: 'Month'
},
backgroundColor: { fill:'transparent' },
legend: {position: 'none'},
'animation':{duration:1000,easing:'out'}
};
var chart = new google.visualization.BarChart(document.getElementById(id));
chart.draw(data, options);
setTimeout(function(){
for(i=0;i<dataLength;i++){
data.setValue(i,1,myData[i][1]);
}
chart.draw(data, options);
},1000);
}
},
packages: ['corechart']
});
},"JSON");
});
The post is where I get my data from the backend. I know my post is ok because it comes back instantly, but I do know that the code after the callback is not running, every time. Which means for some reason I don't think loader.js is downloading properly.
Once the charts do show everything is fine. Can anyone tell me why the charts don't load when the page first loads?
If you are wondering about the splice I can tell you about that. I bring back all my data in one array and then split them up into 3 arrays, so I only have to make the one post for 3 charts. There is nothing wrong with my arrays however, just the google chart callback.
The answer is this. Even though I disabled my addon popup blocker to see if this was causing the problem there was something I didn't know. Mozilla Firefox has a built in popup blocker. Under tools/options/Content. You need to untick block popup windows, and then google charts will load fine into mozilla. This has been bugging me for weeks, and I didn't even know it had a built in popup blocker.
这篇关于为什么不刷新Google图表直到我刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
