TypeError: google.visualization est indéfini

Je suis en train de travailler avec Google API graphiques, mais j'obtiens une erreur que je ne peux pas comprendre:

Voici mon code:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/statistics/overview.js"></script>

Et le code de overview.js c'est comme cela:

var statisticsOverview = {
init: function() {
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(this.drawIncomeChart());
google.setOnLoadCallback(this.drawExpensesChart());
google.setOnLoadCallback(this.drawEconomiesChart());
},
drawIncomeChart: function() {
var data = [
['Year', 'Income'],
['October 2013', 1000],
['January 2014', 1170],
['March 2014', 660]
];
var options = {
title: 'Income Performance',
colors: ['green']
};
var id = 'chart_income';
this.drawLineChart(data, options, id);
},
drawExpensesChart: function() {
var data = [
['Year', 'Expense'],
['October 2013', 1000],
['January 2014', 1170],
['March 2014', 660]
];
var options = {
title: 'Expense Performance',
colors: ['red']
};
var id = 'chart_expenses';
this.drawLineChart(data, options, id);
},
drawEconomiesChart: function() {
var data = [
['Year', 'Savings'],
['2004', 1000],
['2005', 1170],
['2006', 660],
['2007', 1030]
];
var options = {
title: 'Savings Performance',
colors: ['orange']
};
var id = 'chart_economies';
this.drawLineChart(data, options, id);
},
drawLineChart: function(data, options, id) {
console.log(google.visualization);
var chartData = google.visualization.arrayToDataTable(data);
var chart = new google.visualization.LineChart(document.getElementById(id));
chart.draw(chartData, options);
}
};
statisticsOverview.init();

C'est étrange, parce que la console.log (), qui me donnera l'objet de google avec la propriété de visualisation. Ce que je fais mal?

source d'informationauteur zuzuleinen

  1. 21

    Problème de synchronisation. En général, vous appeler google chart comme

      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
...
}

    Ainsi, lors de la visualisation package est chargé de la fonction dessiner est appelé.

    Maintenant, dans votre cas, tout est fait plus tard, de sorte que vous avez à faire:

    google.load("visualization", "1", {packages: ["corechart"]});
function doStats() {
var statisticsOverview = {
init: function() {
console.log('init');
this.drawIncomeChart();
this.drawExpensesChart();
this.drawEconomiesChart();
},
...
};    
statisticsOverview.init()
}
google.setOnLoadCallback(doStats);

    Résultat similaire peut être obtenu à l'aide de 

    setTimeout(function() {
statisticsOverview.init();
}, 3000);

    sans fonction wrapper.

  2. 0

    Essayer de cette façon. Cela fonctionne bien pour moi

        var timeout;
google.charts.load('current', { 'packages': ['corechart'] });
$(document).ready(function(){
timeout = setInterval(function () {
if (google.visualization != undefined) {
drawChart();
clearInterval(timeout);
}
}, 300);
});
function drawChart(range, type) {
var data = new google.visualization.DataTable();
.....
}