페이스 북에서 Chart.JS를 좋아합니다.

Question

저는 Chart.JS (chartjs.org)를 사용하고 있으며, Facebook 차트를 좋아합니다.

<script> 
    var pieData = [ 
      { 
       value : 30, 
       color : "#f04124" 
      }, 
      { 
       value : 70, 
       color : "#fff" 
      } 

     ]; 

var myPie = new Chart(document.getElementById("chart_01").getContext("2d")).Pie(pieData); 

</script> 

내가 그런 일을 시도했지만, 제대로 동작하지 않습니다 :

내 파이 차트는 그렇게 확인하고있다.

<script> 
jQuery.getJSON('http://graph.facebook.com/mysiteforchartdata1?callback=?', function(data){ 
      var fb_count2 = data['likes'].toString(); 

      $('.facebook_likes').html(fb_count2); 
}); 
jQuery.getJSON('http://graph.facebook.com/mysiteforchartdata2?callback=?', function(data){ 
      var fb_count2 = data['likes'].toString(); 

      $('.facebook_likes').html(fb_count2); 
}); 

    var pieData = [ 
      { 
       value : fb_count1, 
       color : "#f04124" 
      }, 
      { 
       value : fb_count2, 
       color : "#fff" 
      } 

     ]; 

var myPie = new Chart(document.getElementById("chart_01").getContext("2d")).Pie(pieData); 

</script> 

저는 자바 스크립트에서 초보자로서 전체 코드에 대해 감사 할 것입니다. 감사합니다.

Answer 1

$.getJSON은 pieData을 정의 할 때 fb_count1과 fb_count2 변수가 아직 존재하지 않습니다. 당신은 다음을 수행해야합니다 :

$.when(
jQuery.getJSON('http://graph.facebook.com/metallica?callback=?'), 
jQuery.getJSON('http://graph.facebook.com/ironmaiden?callback=?') 
).then(function(data1, data2){ 
fb_count1 = data1[0]['likes']; 
fb_count2 = data2[0]['likes']; 

console.log([fb_count1, fb_count2]); // you can see the variables are there 

var pieData = [ 
    { 
    value : fb_count1, 
    color : "#f04124" 
    }, 
    { 
    value : fb_count2, 
    color : "#fff" 
    } 
]; 

var myPie = new Chart(document.getElementById("chart_01").getContext("2d")).Pie(pieData); 
}); 

$.when 여러 요청 (또는 다른 지연 행동)에 대한 콜백을 만들 수있는 편리한 방법입니다. 요청이 하나뿐이면 정상적으로 콜백을 할당 할 수 있습니다.

jQuery.getJSON('http://graph.facebook.com/metallica?callback=?', function(data){ 
    // now you can do things with data 
    // but remember that everything that operates on it should be here 
}) 
// ... and not here