2017-02-21 13 views
0

안녕하세요 highchart.js에서 호출아약스 나는 아약스는 highchart.js 라이브러리에서 호출 만드는 방법에 대한 질문을 할</p> <p>:-) 모든 개발자가

나는 통해 반환하고 일부 값이 Ajax는 백엔드 (MVC .NET 프로젝트)에 제공하는 정보를 기반으로하고 각 클래스에서 새로운 차트를 gainChart 클래스로 렌더링하려고합니다 (다른 목적으로 ID를 추가하기 때문에 그렇게하지 마십시오. 그들을 귀찮게 :-))

 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 문자열), 아무 것도 표시되지 않고 차트의 배경 만 표시됩니다. 누군가가 내게이 문제를 해결하는 방법과 내 문제를 해결하기 위해 무엇을 바꿀 것인지에 대한 단서를 줄 수 있습니까?

미리 감사드립니다.

답변

0

jQuery $.ajax 메서드 호출은이 호출로 인해 발생하는 데이터를 반환하지 않으므로 myData = $.ajax()을 쓸 수 없습니다. 데이터를 얻으려면 success 콜백을 사용해야하며 다음을 사용하십시오.

그래서 예를 들어,이 대신 작성 :

$.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) 
      }] 
     }); 
    } 
}); 
+0

감사합니다, Métoule 귀하의 답변 :

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 성공 콜백에서 렌더링 할 것이기 때문에 스크립트의 시작 부분에서 var 차트 = 새 Highcharts.Chart 코드를 삭제해야합니까? 모두에게 감사합니다. :) – Nikolay

+0

나는 그것을 실제로 지켰지 만 성공 콜백 본문으로 옮겨졌습니다. 솔직하게 말해서 그래프를 그리기 전에 jQuery와 AJAX에 익숙해지기를 권합니다. 예를 들어,'console.log()'를 사용하여 ajax 호출에서 얻은 것을 표시 할 수 있습니다. –

+0

안녕하세요. 빠른 답변을 주셔서 다시 한 번 감사드립니다. 첫 번째 코멘트에서 알 수 있듯이, console.log()를 사용하여 ajax 호출 결과를 표시합니다. 어쨌든, 나는 당신의 제안을 시도하고 피드백을 쓸 것입니다. :-) – Nikolay

관련 문제