형식 오류 : google.visualization은 내가 이해할 수없는

Question

내가 구글 차트 API와 함께 작동하도록 노력하고 정의되지 않은,하지만 난 오류가 발생한다 :

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

그리고 다음은

내 코드입니다 overview.js에서 코드는 다음과 같다 :을 console.log()가 나에게 속성 시각화와 구글 객체를 제공하기 때문에

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

이, 이상하다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

타이밍 문제. 일반적으로 당신은 시각화 패키지를 그리는 기능을로드 할 때,라고

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

같은 구글 차트를 호출합니다.

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

비슷한 결과가 래퍼 기능이없는

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

얻을 사용할 수 있습니다 : 당신이해야 할 수 있도록

지금, 당신의 경우에 모든 것이 나중에 이루어집니다.