Charts 尝试创建google图表时出错未捕获类型错误：无法读取属性'；arrayToDataTable'；未定义的

我正在尝试使用谷歌图表创建一个饼图。但是我得到了以下错误

Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined
at drawContactsStatisticsChart 

我做错了什么

这是我的密码

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script language="JavaScript" type="text/javascript">
     (function($) {

         // Load the Visualization API and the corechart package.
         google.charts.load("current", {packages:["corechart"]});

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawContactsStatisticsChart);

        var contatatsStatisticsData;
        var contactsStatisticsChart;

        var emailCampaignId = 1;
        var stepId = 0;
        var queryString = "emailCampaignId=" + emailCampaignId + "&stepId=" + stepId ;
        var getEmailCampaignUrl = "/mailgun/getAggregatedStats.htm";

        function drawContactsStatisticsChart(totalDelivered, totalBounced, totalOpened, totalClicked, totalUnsubscribed, totalComplained) {

            contatatsStatisticsData = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['DELIVERED = ' + totalDelivered, totalDelivered],
                ['BOUNCED = ' + totalBounced, totalBounced],
                ['OPENED = ' + totalOpened, totalOpened],
                ['CLICKED = ' + totalClicked, totalClicked],
                ['UNSUBSCRIBED = ' + totalUnsubscribed, totalUnsubscribed],
                ['COMPLAINED = ' + totalComplained , totalComplained]
            ]);

            // Set chart options
            var options = {
                title: 'My Campaign Statistics',
                is3D: true,
            };

            // Instantiate and draw our chart, passing in some options.
            contactsStatisticsChart = new google.visualization.PieChart(document.getElementById('pieChart_3d'));
            google.visualization.events.addListener(contactsStatisticsChart, 'select', selectHandler);
            contactsStatisticsChart.draw(contatatsStatisticsData, options);
        } 

        function showEmailCampaignStatistics(response) {

            var totalDelivered = response.totalDelivered;
            var totalBounced = response.totalBounced;
            var totalOpened = response.totalOpened;
            var totalClicked = response.totalClicked;
            var totalUnsubscribed = response.totalUnsubscribed;
            var totalComplained = response.totalComplained;

            drawContactsStatisticsChart(totalDelivered, totalBounced, totalOpened, totalClicked, totalUnsubscribed, totalComplained);

        }

        function selectHandler() {
            var selectedItem = contactsStatisticsChart.getSelection()[0];
            var value = contatatsStatisticsData.getValue(selectedItem.row, 0);
            alert('The user selected ' + value);
        }

        function getEmailCampaign(url, queryString) {       

            $.ajax({
                url: url, 
                data : queryString,
                dataType: "json",
                type: "POST",
                success: function(response) {
                    if (!$.isEmptyObject(response)) {
                        showEmailCampaignStatistics(response);
                    } else {  
                    }
                }, error: function(xhr, status, error){
                    if (xhr.status == 500) {
                        var errorResponse = xhr.responseText;
                        if (errorResponse) {
                            try {
                                var jsonErrorResponse = $.parseJSON(errorResponse);
                                var actionErrors = jsonErrorResponse.actionErrors;
                                var errorMessage = actionErrors.join();
                            alert(errorMessage);
                            } catch(err) {
                                alert(arr.message);
                                alert(errorResponse);
                            }

                        }
                    }
                }
            });
        }

        getEmailCampaign(getEmailCampaignUrl, queryString);

    })(jQuery); //end of  (function($))
</script>

（函数（$）{
//加载可视化API和corechart包。
load（“当前”{packages:[“corechart”]}）；
//将回调设置为在加载Google Visualization API时运行。
setOnLoadCallback（drawContactsStatisticsChart）；
var contatatsStatistics数据；
无功接触器统计图；
var-id=1；
var-stepId=0；
var queryString=“emailCampaignId=“+emailCampaignId+”&stepId=“+stepId；
var getEmailActivationURL=“/mailgun/getAggregatedStats.htm”；
功能图Contacts统计图（totalDelivered、TotalBounched、totalOpened、totalClicked、totalUnsubscribed、totalComplained）{
contatatsStatisticsData=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
['DELIVERED='+totalDelivered，totalDelivered]，
['Bounched='+TotalBounched，TotalBounched]，
['OPENED='+totalOpened，totalOpened]，
['CLICKED='+totalClicked，totalClicked]，
['UNSUBSCRIBED='+totalUnsubscribed，totalUnsubscribed]，
['Complauded='+TotalComplauded，TotalComplauded]
]);
//设置图表选项
变量选项={
标题：“我的竞选统计数据”，
is3D：是的，
};
//实例化并绘制图表，传入一些选项。
contactsStatisticsChart=new google.visualization.PieChart（document.getElementById（'PieChart_3d'））；
google.visualization.events.addListener（contactsStatisticsChart，'select'，selectHandler）；
联系人统计图表。绘图（续统计数据、选项）；
} 
函数showEmailCampaignStatistics（响应）{
var totalDelivered=响应。totalDelivered；
var TotalBounched=响应。TotalBounched；
var totalOpened=response.totalOpened；
var totalClicked=response.totalClicked；
var totalUnsubscribed=响应。totalUnsubscribed；
var TotalComplauded=response.TotalComplauded；
DrawContacts统计图（totalDelivered、TotalBounched、totalOpened、totalClicked、totalUnsubscribed、totalComplained）；
}
函数selectHandler（）{
var selectedItem=联系人统计图表。getSelection（）[0]；
var value=contatatsStatisticsData.getValue（selectedItem.row，0）；
警报（“用户选择的”+值）；
}
函数getEmailCampaign（url，queryString）{
$.ajax({
url:url，
数据：查询字符串，
数据类型：“json”，
类型：“POST”，
成功：功能（响应）{
如果（！$.isEmptyObject（响应））{
统计数字（回应）；
}否则{
}
}，错误：函数（xhr，状态，错误）{
如果（xhr.status==500）{
var errorResponse=xhr.responseText；
如果（错误响应）{
试一试{
var jsonErrorResponse=$.parseJSON（errorResponse）；
var actionErrors=jsonErrorResponse.actionErrors；
var errorMessage=actionErrors.join（）；
警报（错误消息）；
}捕捉（错误）{
警报（arr.message）；
警报（错误响应）；
}
}
}
}
});
}
getEmailCampaign（getEmailCampaignUrl，queryString）；
})（jQuery）//结束（函数（$））

当您在谷歌图表完全加载之前尝试使用谷歌图表时，会发生这种情况

在这种情况下，首先调用的是

getEmailCampaign

，
最终调用

drawContactsStatisticsChart

，
在

google.charts.load

之前发生的所有事情都已完成

另外，没有理由将google回调设置为

drawContactsStatisticsChart

，
因为它不会传递函数所需的所有参数

在调用

getEmailCampaign

之前，请等待回调

建议安装如下

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script language="JavaScript" type="text/javascript">
     (function($) {

        var contatatsStatisticsData;
        var contactsStatisticsChart;

        var emailCampaignId = 1;
        var stepId = 0;
        var queryString = "emailCampaignId=" + emailCampaignId + "&stepId=" + stepId ;
        var getEmailCampaignUrl = "/mailgun/getAggregatedStats.htm";

        // Load the Visualization API and the corechart package.
        google.charts.load("current", {packages:["corechart"]});

        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(function () {
          getEmailCampaign(getEmailCampaignUrl, queryString);
        });

        function drawContactsStatisticsChart(totalDelivered, totalBounced, totalOpened, totalClicked, totalUnsubscribed, totalComplained) {

            contatatsStatisticsData = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                ['DELIVERED = ' + totalDelivered, totalDelivered],
                ['BOUNCED = ' + totalBounced, totalBounced],
                ['OPENED = ' + totalOpened, totalOpened],
                ['CLICKED = ' + totalClicked, totalClicked],
                ['UNSUBSCRIBED = ' + totalUnsubscribed, totalUnsubscribed],
                ['COMPLAINED = ' + totalComplained , totalComplained]
            ]);

            // Set chart options
            var options = {
                title: 'My Campaign Statistics',
                is3D: true,
            };

            // Instantiate and draw our chart, passing in some options.
            contactsStatisticsChart = new google.visualization.PieChart(document.getElementById('pieChart_3d'));
            google.visualization.events.addListener(contactsStatisticsChart, 'select', selectHandler);
            contactsStatisticsChart.draw(contatatsStatisticsData, options);
        }

        function showEmailCampaignStatistics(response) {

            var totalDelivered = response.totalDelivered;
            var totalBounced = response.totalBounced;
            var totalOpened = response.totalOpened;
            var totalClicked = response.totalClicked;
            var totalUnsubscribed = response.totalUnsubscribed;
            var totalComplained = response.totalComplained;

            drawContactsStatisticsChart(totalDelivered, totalBounced, totalOpened, totalClicked, totalUnsubscribed, totalComplained);

        }

        function selectHandler() {
            var selectedItem = contactsStatisticsChart.getSelection()[0];
            var value = contatatsStatisticsData.getValue(selectedItem.row, 0);
            alert('The user selected ' + value);
        }

        function getEmailCampaign(url, queryString) {

            $.ajax({
                url: url,
                data : queryString,
                dataType: "json",
                type: "POST",
                success: function(response) {
                    if (!$.isEmptyObject(response)) {
                        showEmailCampaignStatistics(response);
                    } else {
                    }
                }, error: function(xhr, status, error){
                    if (xhr.status == 500) {
                        var errorResponse = xhr.responseText;
                        if (errorResponse) {
                            try {
                                var jsonErrorResponse = $.parseJSON(errorResponse);
                                var actionErrors = jsonErrorResponse.actionErrors;
                                var errorMessage = actionErrors.join();
                            alert(errorMessage);
                            } catch(err) {
                                alert(arr.message);
                                alert(errorResponse);
                            }

                        }
                    }
                }
            });
        }

    })(jQuery); //end of  (function($))
</script>

（函数（$）{
var contatatsStatistics数据；
无功接触器统计图；
var-id=1；
var-stepId=0；
var queryString=“emailCampaignId=“+emailCampaignId+”&stepId=“+stepId；
var getEmailActivationURL=“/mailgun/getAggregatedStats.htm”；
//加载可视化API和corechart包。
load（“当前”{packages:[“corechart”]}）；
//将回调设置为在加载Google Visualization API时运行。
google.charts.setOnLoadCallback（函数（）{
getEmailCampaign（getEmailCampaignUrl，queryString）；
});
功能图Contacts统计图（totalDelivered、TotalBounched、totalOpened、totalClicked、totalUnsubscribed、totalComplained）{
contatatsStatisticsData=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
['DELIVERED='+totalDelivered，totalDelivered]，
['Bounched='+TotalBounched，TotalBounched]，
['OPENED='+totalOpened，totalOpened]，
['CLICKED='+totalClicked，totalClicked]，
['UNSUBSCRIBED='+totalU