我正在尝试使用Google图表创建饼图。但是我遇到了以下错误
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>
答案 0 :(得分:1)
这种情况发生在您尝试完全加载Google图表之前。
在这种情况下,首先调用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>