chart.js

Question

을 사용하여 원형 차트에 JSON 데이터를 처음으로 표시하고 chart.js를 처음 사용하면서 해결할 수없는 작은 버그가 발생했습니다. 아래는 내 코드이지만 레이블 만 표시하고 파이 차트는 렌더링하지 않습니다. 여기에 chart.js 문서에서

암 다음 샘플 http://www.chartjs.org/docs/#doughnut-pie-chart-example-usage

는 당신의 도움이 이해할 수있을 것이다.

<canvas id="myChart" width="200" height="200"></canvas> 

$(document).ready(function() { 
/* 
     -> #47A508 = green (wins) 
     -> #ff6a00 = orange (losses) 
     -> #ffd800 = yellow (draws) 
    */ 
    var DataArray = []; 
    var ctx = document.getElementById("myChart"); 

    $.ajax({ 
     url: 'http://api.football-data.org/v1/competitions/426/leagueTable', 
     dataType: 'json', 
     type: 'GET', 
    }).done(function (result) { 
     $.each(result.standing, function() { 
      var name = "Manchester United FC"; 
      if (this.teamName == name) { 
       DataArray.push([this.wins, this.losses, this.draws]); 
      } 
     }); 
     var myChart = new Chart(ctx, { 
      type: 'pie', 
      data: { 
       label: 'Manchester United Current Form', 
       labels: [ 
         "Wins", 
         "Losses", 
         "Draws" 
       ], 
       datasets: [ 
        { 
         data: DataArray, 
         backgroundColor: [ 
          "#47A508", 
          "#ff6a00", 
          "#ffd800" 
         ], 
         hoverBackgroundColor: [ 
          "#FF6384", 
          "#36A2EB", 
          "#FFCE56" 
         ] 
        }] 
      }, 
      options: { responsive: true } 
     }); 
    }); 
} 

Answer 1

난이 해결있어, 잘 슬프게도, 아니 마법 전혀 자랑 할 수 있습니다. 처음에는 코드에 아무런 문제가 없었지만 DOM 렌더링 성능에 문제가있었습니다. @alwaysVBNET 및 @Aniko Litvanyi에게도 감사드립니다.

이 link은 나를 도와주었습니다.

Answer 2

는 어쩌면 그것은 DataArray 비동기를 채우고 당신이 차트 데이터로 사용하고자 할 때 배열은 준비되어 있지 않습니다 때문에 JQuery와의 각이다.

$.ajax({ 
     url: 'http://api.football-data.org/v1/competitions/426/leagueTable', 
     dataType: 'json', 
     cache: false, //add this 
     async: false, //add this 
     type: 'GET', 

또한

아약스의 결과 : 당신이 (더러운 솔루션 인) 아약스 또는 아래의 작업을 수행하기위한

for(var i = 0; i < result.standing; i++){ 
    var name = "Manchester United FC"; 
    var team = result.standing[i]; 
     if (team.teamName == name) { 
      DataArray.push(team.wins, team.losses, team.draws); 
     } 
} 

Answer 3

이 callbacks을 시도 루프에 대한 간단한 JS로는 $ .each 변경 배열을 사용하는 대신 아래 코드를 사용하여 반환 할 수 있습니다.

jQuery.parseJSON(result); 

Answer 4

문제는 DataArray에 있습니다. 구현 방법은 단일 항목이있는 배열입니다. 다른 배열 자체입니다. 대신 다음 배열을 인스턴스화하기 때문이다

[<wins>, <losses>, <draws>] 

의

[[<wins>, <losses>, <draws>]] 

그것으로 배열 개체를 밀어 넣습니다.

이 다음과 같은 기능을 사용해보십시오 해결하려면 :

(...) 
$.each(result.standing, function() { 
    var name = "Manchester United FC"; 
    if (this.teamName == name) { 
     DataArray = ([this.wins, this.losses, this.draws]); 
     console.log("This team name"); 
    } 
}); 
(...)