如何在asp.net中使用ajax Json Web方法和amcharts

Question

Demo like this map //這個圖表功能..我想通過國家ID在地圖上chatdata //使用ajax json web方法。 //錯誤：Uncaught 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(); 
      } 
     }); 

    }); 

// ------這是機能的研究IM調用..returning值-------

---

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