问题
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.
回答1:
google's callback can be used in place of --> $(document).ready
try calling google.load before anything else
if the callback fires, and the $.post works,
then there should be no delay in drawing the charts
try restructuring as seen in the following snippet...
google.charts.load('current', {
packages: ['corechart'],
callback: function () {
$.post("database/home/ajax/ajax.php", {CODE:"loadCharts"}, function(data){
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);
}
},"JSON");
}
});
回答2:
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.
来源：https://stackoverflow.com/questions/42098315/why-arent-google-charts-loading-until-i-refresh