サードパーティのパッケージの周りにラッパークラスを作成する

Question

私はGoogleのチャートパッケージの周りにラッパークラスを作成しようとしています。私が取得しているエラーはUncaught TypeErrorです：未定義の 'arrayToDataTable'プロパティを読み取ることができません。問題は、Googleのグラフ機能にアクセスする際に問題があることだと思いますか？

ビュー：

@extends('layouts/secondary') 

@section('title', 'Charts') 

@section('scripts') 
{!! HTML::script('https://www.gstatic.com/charts/loader.js') !!} 
{!! HTML::script('/assets/js/custom-plugins/charts/charts-bar.js')!!} 
@stop 

@section('content') 
@parent 

<div class="row main-content"> 
    <h1>Charts</h1> 

    <div id="barChartContainer"></div> 
</div> 

<script type="text/javascript"> 
    var data = [ 
     ['City', '2010 Population'], 
     ['New York City, NY', 8175000], 
     ['Los Angeles, CA', 3792000], 
     ['Chicago, IL', 2695000], 
     ['Houston, TX', 2099000], 
     ['Philadelphia, PA', 1526000] 
    ]; 
    var options = { 
     title: 'Population of Largest U.S. Cities', 
     chartArea: {width: '50%'}, 
     hAxis: { 
      title: 'Total Population', 
      minValue: 0 
     }, 
     vAxis: { 
      title: 'City' 
     } 
    }; 

    var bar = new BarChart('barChartContainer', data, options); 
    bar.draw(); 
</script> 
@stop 

クラス：

function BarChart(container, data, options){ 
    this.container = container; 
    this.data  = data; 
    this.options = options; 

    this.getData = function(){ 
    return data; 
    }; 

    this.getOptions = function(){ 
    return options; 
    }; 

    this.getContainer = function(){ 
    return container; 
    }; 
} 

BarChart.prototype.draw = function(){ 
    google.charts.load('current', {packages: ['corechart', 'bar']}); 
    google.charts.setOnLoadCallback(this.drawChart()); 
}; 

BarChart.prototype.drawChart = function(){ 
    var chartData = 
      google.visualization.arrayToDataTable(this.getData()); 
    var chart = new google.visualization.BarChart(
        document.getElementById(this.getContainer())); 

    chart.draw(chartData, this.getOptions()); 
}; 

私は、クラスを使用していないと、チャートを作成するコードは、ビュースクリプト内であるときにチャートが表示するように得ることができます。

Answer 1

私はUse parameter in function passed to google.setOnLoadCallback();から私の答えを得ました。

問題は、setOnLoadCallbackに関数を渡すのではなく、関数を呼び出すことでした。私の描画機能は次のようになります：

BarChart.prototype.draw = function(){ 
    var container = this.getContainer(); 
    var data = this.getData(); 
    var options = this.getOptions(); 
    var drawChart = this.drawChart; 

    google.charts.load('current', {packages: ['corechart', 'bar']}); 
    google.charts.setOnLoadCallback(function(){ 
     drawChart(container, data, options); 
    }); 
};