javascript - JSモジュールからオブジェクトを返すときの「未定義」

Question

グローバル変数を定義し、グラフをレンダリングするモジュールの 1 つを介して使用できるメソッドと等しくなるように設定しました。モジュールはチャートを返す必要があるため、変数「alChart」にチャート オブジェクトを割り当てます。また、このコードでチャートが完全に正常にレンダリングされることにも言及する価値があります。

チャート レンダリング モジュール:

var ChartRendererGateway = (function ($, Highcharts) {

"use strict";

//Private variables
var chart;
var result;

//Private methods
var success = function (data, textStatus, jqXHR) {

    var seriesObject = $.parseJSON(data);
    result = seriesObject;

};

var fail = function () {

    errorController.showError("Something went wrong when trying to load the chart data")

};

var drawChart = function (renderTo, options) {
    options.chart.renderTo = renderTo;
    options.series = result;
    chart = new Highcharts.Chart(options);
};

//Public methods
return {

    render: function (renderTo, promise, options) {

        promise.then(success, fail)
            .done(function () {
                drawChart(renderTo, options);
            })
            .fail(function () {
                errorController.showError("Something went wrong fetching chart data!");
            });

        return chart; //Chart object exists here, but is undefined when inspecting variable it is assigned to in the .ready function
    },

    destroy: function(chartName){
        chartName.destroy();
    }
};

})(jQuery, Highcharts);

。準備（）：

//Global Variables
var alChart;

//DOM Ready
$(function () {

var chartData = ChartDataGateway.getSeries("/Dashboard/GetAssetLiabilityChartData");

alChart = ChartRendererGateway.render("dashboard-AL-chart", chartData,
    {
        chart: {
            type: 'line',
            zoomType: 'xy'
        },
        title: {
            text: null
        },
        xAxis: {
            title: {
                text: 'Date'
            },
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Amount'
            }
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            line: {
                allowPointSelect: true,
                cursor: 'pointer',
                marker: {
                    enabled: true,
                    radius: 1,
                    symbol: 'circle',
                    states: {
                        select: {
                            fillColor: '#fff',
                            radius: 4,
                            halo: {
                                size: 4,
                                attributes: {
                                    'stroke-width': 1,
                                    stroke: '#003f72'
                                }
                            }
                        }
                    }
                }
            }
        }
    });
console.log(alChart); //This is returning 'undefined' and NOT the chart object WHY?! :S

});