尝试创建谷歌图表时出现错误 Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined

Question

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

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>

Answer 1

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

在这种情况下，首先调用getEmailCampaign，
最终调用drawContactsStatisticsChart,
在google.charts.load 完成之前发生的所有事情。

另外，没有理由将谷歌回调设置为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>