ajax 호출을 통해 가져온 데이터로 Chart.js 그리기

Question

Chart.js를 사용하여 원형 차트를 그려야합니다. 사용자가 먼저 차트에서 사용되는 데이터를 필터링하는 일부 선택을해야하기 때문에 차트를 동적으로 만들고 싶습니다.

나는 페이지의 캔버스가 :

<canvas id="PieChart"width="54" height="27" style="display: block; width: 54px; height: 27px;"></canvas> 

및 I는 다음과 같습니다 json으로 다시 얻을 것이다 아약스 호출

$('.rappofiler').change(function() { 
     console.log('render report'); 
     $.ajax({ 
      url: "../controllers/reportController.php", 
      type: 'POST', 
      dataType: 'html', 
      data: { 
       'action': 'openIssues', 
       'filter1' : $('#filter1').val(), 
       'filter2' : $('#filter2').val() 
      } 
     }).done(function (chartdata) { 

      var parsedChartdata = $.parseJSON(chartdata); 

      // now draw the chart 

    }) 

에게 AJAX 호출을 할 수있는 코드를 가지고 :

[{"description":"team1","number":11},{"description":"team2","number":408},{"description":"team3","number":12}] 

반환되는 값의 수는 다양합니다.

var data = { 
    labels: [ 
     "Red", 
     "Blue", 
     "Yellow" 
    ], 
    datasets: [ 
     { 
      data: [300, 50, 100], 
      backgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ], 
      hoverBackgroundColor: [ 
       "#FF6384", 
       "#36A2EB", 
       "#FFCE56" 
      ] 
     }] 
}; 

은 무엇 이렇게하는 가장 좋은 방법이 될 것입니다 : 지금은 어떻게 든이 같은 파이 차트를 그릴 코드, 아약스 호출의 결과를 결합해야? 아약스 호출 후 데이터가 반환되는 방식을 변경할 수 없다는 것을 명심하십시오.

Answer 1

좋은 방법을 찾기 위해 많은 어려움을 겪었던 것을 기억하고 있습니다. 이렇게하면 결국 '라벨'과 '데이터'배열이 데이터 변수의 해당 속성에 할당됩니다. 차트.

https://jsfiddle.net/bn32gh94/2/

var output = [{'description': 'team1','number': 11},{'description':'team2','number': 408}, {'description': 'team3','number': 12}]; 

var labels = []; 
var data = []; 

output.forEach(function(entry) { 
    labels.push(entry.description); 
    data.push(entry.number); 
}); 

말 그대로 내가 대중을 처음이기 때문에 바이올린에 문제가 있다면 알려주세요. :)