如何在asp.net中使用带有amcharts的ajax Json Web方法

Question

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;
            }
        });
     }

Answer 1

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 );