Chartjs用の円グラフ - JSON Ajax HTTP GETリクエスト？

Question

私はこれで全く新しいです。今週はキャンバスのChartjsとJSONについて少し学んでいます。私たちはjsonファイルに対してAjax HTTP GETリクエストを使用する必要がありますが、データを配置して円グラフと棒グラフを表示する関数を呼び出す方法はわかりません。誰かが助けることができれば、それは素晴らしいだろう。

HTMLコード

<canvas id="pieChart" width="400" height="400"></canvas> 

    <!-- Scripts --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="js/Chart.js"></script> 
<script src="js/js.js"></script> 

JS

$(function() { 
    getPieChartData(); 
}); 


function getPieChartData() { 
    $.get( 
     'http://localhost:8888/r_tomino_assignment6/data/piechart-data.json', 
     function (data) { 
      displayPieChart(data) 
     }, 
     'json' 
     ); 
} 

var context = document.getElementById("pieChart").getContext("2d"); 
var myPieChart = new Chart(context).Pie(data); 

JSONデータ

[ 
    { 
     "color": "#F7464A", 
     "highlight": "#FF5A5E", 
     "label": "Red", 
     "value": 300 
    }, 
    { 
     "color": "#46BFBD", 
     "highlight": "#5AD3D1", 
     "label": "Green", 
     "value": 50 
    }, 
    { 
     "color": "#FDB45C", 
     "highlight": "#FFC870", 
     "label": "Yellow", 
     "value": 100 
    } 
]; 

Answer 1

はあなたのdisplayPieChart関数が呼び出されてきていますか？どこにも定義されていないようです。そのAJAXリクエストは非同期であるため、必要なコールバック関数を与える必要があります。今すぐdisplayPieChartという別の関数が必要です。これにはdataが必要となり、グラフが作成されます。

その関数は、その後に続く、次の行をあなたのデータを見ることができ

var context = document.getElementById("pieChart").getContext("2d"); 
var myPieChart = new Chart(context).Pie(data); 

例えば

function displayPieChart(data) { 
    var context = document.getElementById("pieChart").getContext("2d"); 
    var myPieChart = new Chart(context).Pie(data); 
} 

を呼び出す必要があります。