Chart.js 도넛 형 차트가 제대로 작동하지 않습니다.

Question

chart.js 도넛 형 차트를 사용하려고합니다. 내 JSON 데이터는 데이터베이스에서 적절한 가져 오기입니다. 그러나 값 차트의 채우기 시간에는 표시되지 않습니다. 만약 내가 예제 코드 정적 다음에 적절한 데이터를 보여주는 붙여 넣기입니다.

function playerPrel2Res(qID){ 
    var tmp="#playerVoteId"+qID; 
    var lab=$(tmp).text(); 
    $.ajax({ 
     type : "POST", 
     url : contextPath + '/common/playerPredCounter.action', //contextPath for dynamic 
     dataType : 'json', 
     data : {predictionID:qID}, 
     success : function(data) { 
      var id=new Array(); 
      var name=new Array(); 

      for (var i = 0; i < data.properties.length; i++) { 
       id[i]= data.properties[i].id; 
       name[i]= data.properties[i].name; 
      } 
      alert("hi..."); 
      var doughnutData = [ 
       { 
        value: id[0], 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: name[0] 
       }, 
       { 
        value: id[1], 
        color: "#46BFBD", 
        highlight: "#5AD3D1", 
        label: name[1] 
       }, 
       { 
        value: id[2], 
        color: "#FDB45C", 
        highlight: "#FFC870", 
        label: name[2] 
       }, 
      ]; 

     window.onload = function(){ 
      var ctx = document.getElementById('playerChartArea').getContext("2d"); 
      alert(ctx +"path"); 
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     };    

     } 
    }); 
} 

var doughnutData = [ 
       { 
        value: id[0].val(), 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: name[0].val() 
       }, 
       { 
        value: 50, 
        color: "#46BFBD", 
        highlight: "#5AD3D1", 
        label: "Green" 
       }, 
       { 
        value: 100, 
        color: "#FDB45C", 
        highlight: "#FFC870", 
        label: "Yellow" 
       }, 
       { 
        value: 40, 
        color: "#949FB1", 
        highlight: "#A8B3C5", 
        label: "Grey" 
       }, 
       { 
        value: 120, 
        color: "#4D5360", 
        highlight: "#616774", 
        label: "Dark Grey" 
       } 
      ]; 

     window.onload = function(){ 
      var ctx = document.getElementById('playerChartArea').getContext("2d"); 
      alert(ctx +"path"); 
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     }; 

한 것은 내 경고가 저를 도와주세요 ctx 에 대해 표시되지 않는 것입니다이 착용을 표시하지 않습니다하지만 난이 다음 보여 정적 차트와 같은 물품.

Answer 1

난이 그냥 이렇게 사용하여 수행 한 난 내 코드를 붙여 해요

var doughnutData=""; 
    $.ajax({ 
     type : "POST", 
     url : contextPath + '/common/action', //contextPath for dynamic 
     dataType : 'json', 
     data : {predictionID:oID}, 
     success : function(data) { 
      var id=new Array(); 
      var name=new Array(); 

      for (var i = 0; i < data.properties.length; i++) { 
       id[i]= data.properties[i].id; 
       name[i]= data.properties[i].name; 
      } 

      doughnutData = [ 
       { 
        value: id[0], 
        color:"#F7464A", 
        highlight: "#FF5A5E", 
        label: name[0] 
       }, 
       { 
        value: id[1], 
        color: "#46BFBD", 
        highlight: "#5AD3D1", 
        label: name[1] 
       }, 
       { 
        value: id[2], 
        color: "#FDB45C", 
        highlight: "#FFC870", 
        label: name[2] 
       }, 
       { 
        value: id[3], 
        color: "#949FB1", 
        highlight: "#A8B3C5", 
        label: name[3] 
       }, 
       { 
        value: id[4], 
        color: "#4D5360", 
        highlight: "#616774", 
        label: name[4] 
       } 
      ]; 
      var ctx = document.getElementById("canvas").getContext("2d"); 
      window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true}); 
     } 
    }); 

그래서 그냥 doughnutData 변수 글로벌 선언하고 windows.load 기능을 제거하고 단지 내부 코드 남아있다. 그게 전부 야.