Ajax звонки в highchart.js

Question

Привет всем разработчикам :-)

Я хочу задать вопрос о создании Ajax вызовов в библиотеке highchart.js

У меня есть ценности, которые я возвращаю через Ajax, основанный на информации, которую я предоставляю фоновому контенту (проект MVC .NET), а затем я хочу отобразить новую диаграмму в каждом div с помощью класса gainChart (я добавляю идентификаторы для других целей, поэтому не делайте беспокоите их :-))

 var iteratorJs = 0; 
    $(".gainChart").each(function (i) { 
     $(this).attr('id', "gainChart" + (i + 1)); 

      var chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: this, 
        type: 'line', 
        margin: 0, 
        backgroundColor: 'rgba(255,255,255,0.3)' 
       }, 
       colors: ['#2E5430'], 
       xAxis: { 
        lineWidth: 0, 
        minorGridLineWidth: 0, 
        lineColor: 'green', 
        //type: 'datetime', 
        labels: { 
         enabled: false 
        }, 
        categories: [ 
         $.ajax({ 
          type: "POST", 
          url: "forex-copy-points-days", 
          data: { page: 0, perPage: 5, iterator: iteratorJs }, 
          dataType: 'json', 
          async: false, 
          success: function (data) { 
           var daysArr = data.days; 
           JSON.stringify(daysArr); 
           categories = daysArr; 
           console.log(daysArr); 
          } 
         }) 
        ] 
       }, 
       tooltip: { 
        formatter: function() { 
         var text = ''; 
         text = this.y + '$'; 
         return text; 
        } 
       }, 
       credits: { enabled: false }, 
       title: { text: null }, 
       legend: { 
        enabled: false 
       }, 
       plotOptions: { 
        series: { 
         stacking: 'normal', 
         pointWidth: 10 
        } 
       }, 
       series: [{ 
        name: 'Balance', 
        showInLegend: true, 
        legendMarkerColor: "green", 
        legendText: "Profit for account", 
        data: [ 
         $.ajax({ 
          type: "POST", 
          url: "forex-copy-points-balance", 
          data: { page: 0, perPage: 5, iterator: iteratorJs }, 
          dataType: 'json', 
          async: false, 
          success: function (balances) { 
           var balArr = balances.balances; 
           JSON.stringify(balArr); 
           data = balArr; 
           console.log(balArr); 
          } 
         }) 
        ] 
       }], 
       exporting: { 
        enabled: false 
       }, 
       responsive: { 
        rules: [{ 
         condition: { 
          maxWidth: 600 
         }, 
         chartOptions: { 
          legend: { 
           enabled: false 
          } 
         } 
        }] 
       } 
      }); 
      iteratorJs++;   
     }); 

Возвращаемые данные, как и должно быть (differen t строк), но ничего не отображается - только фон диаграммы. Может кто-нибудь дать мне понять, как это решить и что изменить, чтобы решить мою проблему.

Заранее благодарен!

Answer 1

вызов метода jQuery $.ajax не возвращает данные, полученные в результате этого вызова, поэтому вы не можете написать myData = $.ajax(). Вы должны использовать обратный вызов success, чтобы получить данные, и , затем его использовать.

Так, например, вместо того, чтобы писать это:

categories: [ 
    $.ajax({ 
     type: "POST", 
     url: "forex-copy-points-days", 
     data: { page: 0, perPage: 5, iterator: iteratorJs }, 
     dataType: 'json', 
     async: false, 
     success: function (data) { 
      var daysArr = data.days; 
      JSON.stringify(daysArr); 
      categories = daysArr; 
      console.log(daysArr); 
     } 
    }) 
] 

Вы должны написать что-то вроде этого:

$.ajax({ 
    type: "POST", 
    url: "forex-copy-points-days", 
    data: { page: 0, perPage: 5, iterator: iteratorJs }, 
    dataType: 'json', 
    async: false, 
    success: function (data) { 
     // create graph from AJAX call results 
     var chart = new Highcharts.Chart({ 
      xAxis: { 
       categories: JSON.stringify(data.days) 
      }, 
      series: [{ 
       data: JSON.stringify(balances.balances) 
      }] 
     }); 
    } 
});