はchart.js

Question

初めてchart.jsを使用して、私はそれを回避するように見えることはできません小さなバグに実行していますを使用して円グラフにJSONデータを表示します。以下は私のコードですが、ラベルを表示するだけで、円グラフ自体を描画しません。

アムここ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

多分それはので、jqueryの、それぞれの、それはDataArray非同期を満たしているとあなたがチャートデータとしてそれを使用したい場合、配列は、準備ができていません。

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

はまた、あなたのAjaxの結果を ：あなたは、以下の（汚いソリューションである）をAJAXまたは実行のためにcallbacksを試しループ

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

ための簡単なJSへの$ .eachを変更 配列を使用する代わりに以下のコードを使用して返すことができます。

jQuery.parseJSON(result); 

Answer 4

問題はあなたのDataArrayにあります。実装方法は、1つのエントリを持つ配列です。それは別の配列そのものです。代わりに、あなたはその配列をインスタンス化しているためである

[<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"); 
    } 
}); 
(...)