Demo like this map //这个图表功能..我想使用ajax json web方法将国家ID传递给地图上的chatdata // //错误:未捕获的TypeError:无法读取未定义的属性“0”。
var chart;
var map;
var chartData = {};
chartData.world = [
{ source: "Oil", energy: 3882.1 },
{ source: "Natural Gas", energy: 2653.1 },
{ source: "Coal", energy: 3278.3 },
{ source: "Nuclear", energy: 610.5 },
{ source: "Hydro", energy: 740.3 }];
chartData.KH = [
{ source: "Oil", energy: 404.6 },
{ source: "Natural Gas", energy: 79.8 },
{ source: "Coal", energy: 1537.4 },
{ source: "Nuclear", energy: 15.9 },
{ source: "Hydro", energy: 139.3 }];
chartData.CN = [
{ source: "Oil", energy: 842.9 },
{ source: "Natural Gas", energy: 588.7 },
{ source: "Coal", energy: 498 },
{ source: "Nuclear", energy: 190.2 },
{ source: "Hydro", energy: 62.2 }];
chartData.MY = [
{ source: "Oil", energy: 124.9 },
{ source: "Natural Gas", energy: 350.7 },
{ source: "Coal", energy: 82.9 },
{ source: "Nuclear", energy: 37 },
{ source: "Hydro", energy: 39.8 }];
chartData.PH = [
{ source: "Oil", energy: 148.5 },
{ source: "Natural Gas", energy: 46.7 },
{ source: "Coal", energy: 245.8 },
{ source: "Nuclear", energy: 3.8 },
{ source: "Hydro", energy: 24 }];
chartData.TH = [
{ source: "Oil", energy: 148.5 },
{ source: "Natural Gas", energy: 46.7 },
{ source: "Coal", energy: 245.8 },
{ source: "Nuclear", energy: 3.8 },
{ source: "Hydro", energy: 24 }];
chartData.ID = [
{ source: "Oil", energy: 197.6 },
{ source: "Natural Gas", energy: 78.7 },
{ source: "Coal", energy: 108.8 },
{ source: "Nuclear", energy: 62.1 },
{ source: "Hydro", energy: 16.7 }];
chartData.VN = [
{ source: "Oil", energy: 197.6 },
{ source: "Natural Gas", energy: 78.7 },
{ source: "Coal", energy: 108.8 },
{ source: "Nuclear", energy: 62.1 },
{ source: "Hydro", energy: 16.7 }];
AmCharts.ready(function () {
// *** CREATE CHART *********************************************************
// PIE CHART
chart = new AmCharts.AmPieChart();
// title of the chart
chart.addLabel("0", "!20", "World", "center", 16);
chart.backgroundAlpha = 0.4;
chart.backgroundColor = "#000000";
chart.dataProvider = chartData.world;
chart.titleField = "source";
chart.valueField = "energy";
chart.sequencedAnimation = true;
chart.startEffect = "elastic";
chart.labelsEnabled = false;
chart.labelText = "[[title]]";
chart.startDuration = 2;
chart.labelRadius = 10;
// WRITE
chart.write("chartdiv");
// *** CREATE MAP ***********************************************************
var chartData1 = generateChartData();
alert(chartData1);
map = new AmCharts.AmMap();
map.pathToImages = "http://www.ammap.com/lib/images/";
//map.panEventsEnabled = true; // this line enables pinch-zooming and dragging on touch devices
var dataProvider = {
mapVar: AmCharts.maps.worldLow
};
map.areasSettings = {
unlistedAreasColor: "#DDDDDD",
rollOverOutlineColor: "#FFFFFF",
rollOverColor: "#CC0000"
};
dataProvider.areas = [
{ title: "Cambodia", id: chartData1[0].id, selectable: true },
//{ title: "Cambodia", id:"KH", selectable: true },
{ title: "China", id: chartData1[1].id, selectable: true },
{ title: "Indonesia", id: chartData1[2].id, selectable: true },
{ title: "Malaysia", id: chartData1[3].id, selectable: true },
{ title: "Philippines", id: chartData1[4].id, selectable: true },
{ title: "Thailand", id: chartData1[5].id, selectable: true },
{ title: "Vietnam", id: chartData1[6].id, selectable: true }
];
map.dataProvider = dataProvider;
map.write("mapdiv");
map.addListener("clickMapObject", function (event) {
if (event.mapObject.id != undefined && chartData[event.mapObject.id] != undefined) {
chart.dataProvider = chartData[event.mapObject.id];
chart.clearLabels();
chart.addLabel("0", "!20", event.mapObject.title, "center", 16);
chart.validateData();
}
});
});
// ------这是我正在调用的函数..返回值-------
function generateChartData() {
debugger;
var chartData2 = [];
var chartDataResults = new Array();
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'varmap.aspx/GetDataonload',
data: {},
success: function (response) {
var aData = response.d;
for (var i = 0; i < aData.length; i++) {
var country = aData[i].costtype;
alert(country);
chartDataResults.push({
id: country
});
}
return chartDataResults;
}
});
}
答案 0 :(得分:0)
jQuery中的AJAX请求是异步的。这意味着您的generateChartData()
函数在实际加载数据之前完成,并继续创建没有任何数据的图表。
您需要在AJAX调用success
处理函数中开始创建图表:
function createChart() {
debugger;
var chartData2 = [];
var chartDataResults = new Array();
$.ajax( {
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'varmap.aspx/GetDataonload',
data: {},
success: function( response ) {
var aData = response.d;
for ( var i = 0; i < aData.length; i++ ) {
var country = aData[ i ].costtype;
alert( country );
chartDataResults.push( {
id: country
} );
}
// create the chart here
// PIE CHART
chart = new AmCharts.AmPieChart();
// title of the chart
chart.addLabel( "0", "!20", "World", "center", 16 );
chart.backgroundAlpha = 0.4;
chart.backgroundColor = "#000000";
chart.dataProvider = chartDataResults;
chart.titleField = "source";
chart.valueField = "energy";
chart.sequencedAnimation = true;
chart.startEffect = "elastic";
chart.labelsEnabled = false;
chart.labelText = "[[title]]";
chart.startDuration = 2;
chart.labelRadius = 10;
// WRITE
chart.write( "chartdiv" );
}
} );
}
$( document ).ready( createChart );