Amcharts複数のajaxデータをデータプロバイダとして直列にロードする

Question

複数のajaxデータをロードしてシリアルグラフを作成しようとしています。これまで私はこれをやっている人は見ていませんでしたが、私は似たような例をオンラインで使うことができました。結果の問題は、ロードに時間がかかり、すべてのデータが一緒にクラスタ化されるということです。各ajaxから返された各データを特定のグラフにロードする方法はありますか（ステータスとカウンタだけが返されます）

$(document).ready(function() { 
 
    var chartDataResults = new Array(); 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    contentType: "application/json", 
 
    url: "../NewProjectEdit.aspx/bronxBind", 
 
    async: false, 
 
    dataType: 'json', 
 
    success: function(data) { 
 
     generateChartData(data.d); 
 
    } 
 
    }); 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    contentType: "application/json", 
 
    url: "../NewProjectEdit.aspx/brooklynBind", 
 
    async: false, 
 
    dataType: 'json', 
 
    success: function(data) { 
 
     generateChartData(data.d); 
 
    } 
 
    }); 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    contentType: "application/json", 
 
    url: "../NewProjectEdit.aspx/manhattanBind", 
 
    async: false, 
 
    dataType: 'json', 
 
    success: function(data) { 
 
     generateChartData(data.d); 
 
    } 
 
    }); 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    contentType: "application/json", 
 
    url: "../NewProjectEdit.aspx/queensBind", 
 
    async: false, 
 
    dataType: 'json', 
 
    success: function(data) { 
 
     generateChartData(data.d); 
 
    } 
 
    }); 
 

 
    $.ajax({ 
 
    type: "POST", 
 
    contentType: "application/json", 
 
    url: "../NewProjectEdit.aspx/statenIslandBind", 
 
    data: '{}', 
 
    async: false, 
 
    dataType: 'json', 
 
    success: function(data) { 
 
     generateChartData(data.d); 
 
    } 
 
    }); 
 

 

 
    function generateChartData(dataValues) { 
 
    for (var i = dataValues.length - 1; i >= 0; --i) { 
 

 
     console.log(dataValues[1]); 
 
     var chartItems = dataValues[i]; 
 
     var chartStatus = chartItems.status 
 
     var chartCounter = chartItems.counter 
 

 
     chartDataResults.push({ 
 
     status: chartStatus, 
 
     counter: chartCounter 
 
     }); 
 

 
     var chart = AmCharts.makeChart("chartdiv", { 
 
     "type": "serial", 
 
     "theme": "light", 
 
     "depth3D": 20, 
 
     "angle": 30, 
 
     "legend": { 
 
      "horizontalGap": 10, 
 
      "useGraphSettings": true, 
 
      "markerSize": 10 
 
     }, 
 
     "valueAxes": [{ 
 
      "stackType": "regular", 
 
      "axisAlpha": 0, 
 
      "gridAlpha": 0 
 
     }], 
 
     "dataProvider": chartDataResults, 
 
     "graphs": [{ 
 
      "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>", 
 
      "fillAlphas": 0.8, 
 
      "labelText": "[[value]]", 
 
      "lineAlpha": 0.3, 
 
      "title": "Bronx", 
 
      "type": "column", 
 
      "color": "#000000", 
 
      "valueField": "counter" 
 
     }, { 
 
      "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>", 
 
      "fillAlphas": 0.8, 
 
      "labelText": "[[value]]", 
 
      "lineAlpha": 0.3, 
 
      "title": "Brooklyn", 
 
      "type": "column", 
 
      "color": "#000000", 
 
      "valueField": "counter" 
 
     }, { 
 
      "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>", 
 
      "fillAlphas": 0.8, 
 
      "labelText": "[[value]]", 
 
      "lineAlpha": 0.3, 
 
      "title": "Manhattan", 
 
      "type": "column", 
 
      "color": "#000000", 
 
      "valueField": "counter" 
 
     }, { 
 
      "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>", 
 
      "fillAlphas": 0.8, 
 
      "labelText": "[[value]]", 
 
      "lineAlpha": 0.3, 
 
      "title": "Queens", 
 
      "type": "column", 
 
      "color": "#000000", 
 
      "valueField": "counter" 
 
     }, { 
 
      "balloonText": "<b>[[title]]</b><br><span style='font-size:14px'>[[category]]: <b>[[value]]</b></span>", 
 
      "fillAlphas": 0.8, 
 
      "labelText": "[[value]]", 
 
      "lineAlpha": 0.3, 
 
      "title": "Staten Island", 
 
      "type": "column", 
 
      "color": "#000000", 
 
      "valueField": "counter" 
 
     }], 
 
     "categoryField": "status", 
 
     "categoryAxis": { 
 
      "gridPosition": "start", 
 
      "axisAlpha": 0, 
 
      "gridAlpha": 0, 
 
      "position": "left", 
 
      "labelRotation": -45 
 
     }, 
 
     "export": { 
 
      "enabled": true 
 
     } 
 

 
     }); 
 
    } 
 
    } 
 
});

#chartdiv { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.amcharts-export-menu-top-right { 
 
    top: 10px; 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="chartdiv" background-color: #FFFFFF; " ></div>

Answer 1

あなたのアプローチにはいくつかの問題があります。

1）async: falseは使用しないでください。現代のブラウザでは、各ユーザーの要求が解決されるまでブラウザをブロックするため、ユーザーエクスペリエンスが低下するため、非推奨です。約束事を利用するには、jQueryの$.whenと.thenを使用して、データを結合してチャートを作成するコールバックを実行する前に、すべてのAJAXリクエストが解決するのを待つことができます。

$.when(
    $.ajax({ 
    type: "POST", 
    contentType: "application/json", 
    url: "../NewProjectEdit.aspx/bronxBind", 
    dataType: 'json' 
    }), 
    // each ajax request 
).then(function(bronxData, brooklynData, manhattanData, queensData, statenIslandData) { 
    var chartDataResults = mergeData(bronxData[0], brooklynData[0], manhattanData[0], statenIslandData[0]); 
    //makeChart here. 
}); 

2）makeChartに複数回コールしないでください。これは、同じdiv内のすべてのコントロールのために戦っている複数のインスタンスを作成しているので、パフォーマンスの問題を引き起こします。ポイント＃1に示されている約束を使用して、コールとデータを同期させてから、最後にチャートを作成します。

3）各グラフのvalueFieldは一意である必要があります。そのため、それぞれのグラフに個別に値を設定できるように、各ボウワーごとに個別のvalueFieldを作成しながらデータをマージする必要があります。ここで私はあなたのセットアップに基づいて思い付いたマージ方法があります：

function mergeData(bronxData, brooklynData, manhattanData, queensData, statenIslandData) { 
    var dataMap = {}; //object map used to group all data by category. 
    var chartData = []; 

    //collect all the data from each borough into the dataMap 
    bronxData.forEach(function(data) { 
    dataMap[data.status] = { 'bronxCounter': data.counter }; 
    }); 

    brooklynData.forEach(function(data) { 
    if (!dataMap[data.status]) { 
     dataMap[data.status] = {}; 
    } 
    dataMap[data.status].brooklynCounter = data.counter 
    }); 
    manhattanData.forEach(function(data) { 
    if (!dataMap[data.status]) { 
     dataMap[data.status] = {}; 
    } 
    dataMap[data.status].manhattanCounter = data.counter 
    }); 
    queensData.forEach(function(data) { 
    if (!dataMap[data.status]) { 
     dataMap[data.status] = {}; 
    } 
    dataMap[data.status].queensCounter = data.counter 
    }); 
    statenIslandData.forEach(function(data) { 
    if (!dataMap[data.status]) { 
     dataMap[data.status] = {}; 
    } 
    dataMap[data.status].statenIslandCounter = data.counter 
    }); 

    //convert dataMap into an array: 
    Object.keys(dataMap).forEach(function(status) { 
    dataMap[status].status = status; //assign the status categoryField 
    chartData.push(dataMap[status]); //add object to array 
    }); 

    return chartData; 
} 

ここでは、このすべてを実証fiddleです。 jsfiddleのエコーエンドポイントを使用してAJAXリクエストをシミュレートすることに注意してください。しかし、一般的な考え方はユースケースで同じです。